This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

wp_nav_menu output and centering the primary navigation

  • Creator
    Topic
  • #7933
    Robert Piller
    Participant

    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!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
    Replies
  • #7944
    Jason Bobich
    Keymaster

    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

    #7956
    Robert Piller
    Participant

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

    #8702
    markp
    Participant

    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

    #8703
    Jason 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?

    #8706
    markp
    Participant

    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

    #8707
    Jason Bobich
    Keymaster

    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.

    #8708
    markp
    Participant

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

    #8709
    markp
    Participant

    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

    #8710
    Jason Bobich
    Keymaster

    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.

    #8711
    markp
    Participant

    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

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.