wp_nav_menu output and centering the primary navigation

[Robert Piller]

I want to center the primary navigation bar, but I’m having problems because of the way wp_nav_menu is output. There’s a space between each LI, which causes the selected page to not fill its container in the navbar: http://www.pillerdesigns.com/bouldereditors/services/ (notice the white behind Services doesn’t reach the left dividing line). How can I modify this theme to output the menu without a space between each list item?

In short, I want the PHP output to go from:

<ul id="primary-menu" class="sf-menu"><li><a href="">Home</a></li>
<li><a href="">Services</a></li>
</ul>

to:

<ul id="primary-menu" class="sf-menu"><li><a href="">Home</a></li><li><a href="">Services</a></li></ul>

Suggestions? Thanks!

Topic

[Jason Bobich]

Hello,

In order to modify how wp_nav_menu() outputs, you’d need to create a custom walker and pass it into the function. The theme definitely does not do this, and so what you’re seeing in the area you’re referencing is just the default output by WordPress. You’re totally free to hook in your own function that outputs wp_nav_menu() with some custom walker you create.

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

http://codex.wordpress.org/Function_Reference/wp_nav_menu

http://wp.tutsplus.com/tutorials/creative-coding/function-examination-wp_nav_menu/

http://wp.tutsplus.com/tutorials/creative-coding/understanding-the-walker-class/

However, I’d say this would probably be a little bit overkill for what you’re trying to do. I think your issue more lies with just your CSS. You should be able to come up with a way to accomplish what you’re going for with CSS changes only.

For example, you’ve got your unordered list already displaying as an inline block centered within the #access element. So, you can try just keeping in your list items floated.

In your stylesheet, I just removed this part in Firefox and Chrome, and all looked good.

#primary-menu.sf-menu li {
	float: none;
	display: inline-block;
}

That’s one approach, but just keep playing with your stylesheet.

Below is a more complicated approach to centering an unordered list where you don’t know the width, but I’ve found it gives you more consistant results in different browsers. You’re essentially positioning the list and the items absolutely at 50% to opposite sides.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

[Robert Piller]

Thank you! Wow, WP Jump Start support kicks ass.

[markp]

Hi Jason (and Robert)

I’m a bit stumped at this point.

I have tried multiple versions of css to try and achieve the effect Robert has on the Boulder Editors website, except I’m trying to keep #access with a background and have the #primary-menu centered and transparent.

I have played with the code from Matthew Taylor that Jason references which is a great article, but still nada.

Any further guidance either of you could share would be most appreciated.
Mark

[Jason Bobich]

@markp You mean you’re just trying to center your navigation? What’s the link to the site you’re working on so I can see what you’re working with?

[markp]

Hi Jason!
The site I’m playing with is my development site, behind a coming soon plugin so not readily viewable.
I’ve attached a screenshot via tinypic that shows what I’m trying to accomplish : [IMG]http://i39.tinypic.com/xndkk8.png[/IMG]

Thanks for the help!
Mark

[Jason Bobich]

I’d be glad to help, but you need to make it live for a few minutes so I can see what you’re working with. I can’t really tell you much from a screenshot; I need to see the code.

[markp]

I sent you a Facebook message with the domain.
Site is live now.
Really appreciate your help and responsiveness 🙂

[markp]

Thought this was pretty cool you got a shout out on page 13!

http://www.awwwards.com/web-design-and-mobile-trends-for-2013-ebook-
download-it-for-free.html

[Jason Bobich]

This is why nothing you’re putting for the menu is working: http://www.uploadblvd.com/uploads/image_51a9461a0ff32.png

None of it having any effect because of syntax errors. Look at how you’re copying/pasting code, what you’re using for an editor, how you’re handling text, etc. You’ve probably got a bunch of rich-text symbols/spacing in there that the browser doesn’t know how to interpret.

[markp]

That is really funky. I have no idea where those came from… or why I didn’t see them in Firebug…

Thanks for the eyes. That did it!
Mark

[Author]

Replies