Tagged: formatting, Navigation, output
wp_nav_menu output and centering the primary navigation
-
CreatorTopic
-
April 29, 2013 at 6:13 am #7933
Robert Piller
ParticipantI 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!
-
CreatorTopic
-
AuthorReplies
-
April 29, 2013 at 8:26 pm #7944
Jason Bobich
KeymasterHello,
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 outputswp_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
April 30, 2013 at 8:18 am #7956Robert Piller
ParticipantThank you! Wow, WP Jump Start support kicks ass.
May 31, 2013 at 11:06 pm #8702markp
ParticipantHi 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.
MarkMay 31, 2013 at 11:38 pm #8703Jason Bobich
Keymaster@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?
May 31, 2013 at 11:49 pm #8706markp
ParticipantHi 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!
MarkMay 31, 2013 at 11:52 pm #8707Jason Bobich
KeymasterI’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.
June 1, 2013 at 12:28 am #8708markp
ParticipantI sent you a Facebook message with the domain.
Site is live now.
Really appreciate your help and responsiveness 🙂June 1, 2013 at 12:36 am #8709markp
ParticipantThought 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.htmlJune 1, 2013 at 12:55 am #8710Jason Bobich
KeymasterThis 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.
June 1, 2013 at 1:03 am #8711markp
ParticipantThat 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 -
AuthorReplies
- You must be logged in to reply to this topic.