Grow your CSS skills. Land your dream job.

Menu Split by Logo

  • # December 21, 2012 at 2:09 am

    Hello,

    I’m trying to figure out how I can go about creating a menu layout that is similar to the following concept: http://bel50.com/ . I like how the logo seems to split the menu in half. I’m sure I could create this with a static webiste. However, I’m trying to figure out the best way to create this when dealing with a CMS that generates menu items like Joomla, WordPress, or Drupal? How do you specify that you want, say, the 3rd menu item specifically to have padding, or margin on one side?

    I used the inspector for the example site that I listed and noticed that the following was being used:
    #primary_nav li + li + li {margin-left: 255px;}

    I’ve also seen other methods performed. Does anyone have any other recommendations on how this could be achieved when taking a CMS into account? I’m also concerned about browser compatibility. Looking forward to suggestions. Thanks!

    # December 21, 2012 at 3:10 am

    For a CMS, unless you want to write code for it to output each li with its own class, using

    #primary_nav li + li + li {margin-left: 255px;}

    is the cleanest way.

    # December 21, 2012 at 4:46 am

    @nickwinters

    Chris Spooner who runs [Line25](http://line25.com/ “”) has made a good article on something similar to what you’re after.

    [Take a look =)](http://line25.com/tutorials/how-to-code-a-stylish-portfolio-design-in-html-and-css “”)

    # December 21, 2012 at 11:49 am

    Thanks guys! I will do a little more exploring with the suggestions you’ve made.

    # December 21, 2012 at 12:16 pm

    This is how I did it with WordPress. I had to create two separate custom menu’s, “Main” and “Secondary”. In the middle I outputted my logo. This allows you to use margin-right for the left menu and margin-left for the right menu.

    < ?php wp_nav_menu( array('menu' => ‘Main’, ‘container’ => ”, ‘items_wrap’ => ‘

      %3$s

    ‘ )); ?>

    < ?php bloginfo('name'); ?>

    < ?php wp_nav_menu( array('menu' => ‘Secondary’, ‘container’ => ”, ‘items_wrap’ => ‘

      %3$s

    ‘ )); ?>

    However, I probably wouldn’t go about it in that way if I could help it. I changed my markup after switching CMS’s and it’s much easier to control adding classes to each list-item.

    Result: http://codepen.io/chrisburton/full/ksqur

    # December 21, 2012 at 12:42 pm

    Nice! Yeah, I read about the nth-child selector option, but read something not too long ago that explained how it wasn’t that widely supported yet. So, I’m thing to figure out what the best option would be. I’d like to just have one menu that selects the 3rd or 4th menu item and tells it to add margin. That seems like it would be the most light-weight option.

    # December 21, 2012 at 12:50 pm

    Ah never mind, that article appears to have a jquery fallback for IE, hah.

    # December 21, 2012 at 1:01 pm

    What’s happening when you hover over articles and store @chrisburton?

    Looks very nice, though!

    # December 21, 2012 at 1:31 pm

    @Watson90 Forgot to change the hover positions. Fixed.

    # December 21, 2012 at 1:35 pm

    @nickwinters You could just use margin-right for all the list-items and then apply `li:last-child { margin-right: 0;}`. If there’s no reason for you to support IE8 or below, I wouldn’t worry about it. However, putting classes on each list-item solves the issue by just calling the last class and setting a 0 margin as shown in my example.

    # December 21, 2012 at 3:20 pm

    Thanks for the feedback @chrisburton! Sadly, I kind of have to worry about IE8 still. The type of traffic my sites get in the IE department seems to be 40-60% IE8. I think it has something to do with the audience demographic in my area. Age group of the users? I dunno, it’s strange when looking at analytics.

    # December 21, 2012 at 3:41 pm

    @nickwinters Then, I would go with the second example that I provided with applying classes to the list-items.

    # March 14, 2013 at 12:59 pm

    I found this query since I wanted to do the same thing. Forefathers Group (http://forefathersgroup.com/) does it very nicely and I studied their CSS and HTML to figure it out. Basically, (and bear with me ’cause I’m no designer) they use a simple background image centered with [margin: 0 auto] and z-index’d at 10000, then the four menu items (ul>a>li) are split across the screen. The first 2 are floated left; the second are floated right. Then its margin fiddling to get them all to sit where you want. I have not tested it in anything but FF (Waterfox 18.0.1) but their site is solid so I’d guess it works. Testing will come later for me once other stuff is done.

    And it works well for responsive, too.

    Anyway, if I can figure this out by studying their method, I know you guys can. I write code thru extreme trial & error not any real knowledge. I borrow that from experts that I find here! I love the open/sharing web community. Thanks to everyone who, explicitly or not, helps me out!

    I hope this helps guide others. Since I figured it out for my site, I wanted to share my $0.02.

    # March 14, 2013 at 1:03 pm

    >Then its margin fiddling to get them all to sit where you want.

    That’s what we want to avoid.

    :)

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".