Menu Split by Logo

[nickwinters]

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!

[danieldatton]

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.

[Watson90]

@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 “”)

[nickwinters]

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

[chrisburton]

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' => '<ul id="main">%3$s</ul>' )); ?>

<h1 class="logo" alt="Christopher Burton"><?php bloginfo('name'); ?></h1>

<?php wp_nav_menu( array('menu' => 'Secondary', 'container' => '', 'items_wrap' => '<ul id="secondary">%3$s</ul>' )); ?>

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.

<nav>
<ul>
<li class="home"><a href="#">Home</a><li>
<li class="about"><a href="#">About</a><li>

<li><h1><a class="logo"> href="#">Home</a></h1><li>

<li class="news"><a href="#">News</a><li>
<li class="projects"><a href="#">Projects</a><li>
</ul>
</nav>

Result:

http://codepen.io/chrisburton/pen/ksqur

[nickwinters]

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.

[nickwinters]

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

[Watson90]

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

Looks very nice, though!

[chrisburton]

@Watson90 Forgot to change the hover positions. Fixed.

[chrisburton]

@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.

[nickwinters]

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.

[chrisburton]

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

[TheLunaticLtd]

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.

[Paulie_D]

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

That’s what we want to avoid.

:)

[r3quiem]

Hi @chrisburton

I am very interested in using your technique and was wondering if you could help me.

I am quite new to wordpress and currently have a site set up where I need to repeat your method in the twentyfourteen theme.

I can find my way around css but the php is a little beyond me.

Where would this code need to go? would it need to replace what is there? Or is what you have theme specific?

I would like to have 2 menu’s as you describe, with 4 links in each and an image in the middle.

What would I need to edit, and would I need to create a copy of it in my child theme to avoid update issues?

[Author]

Posts