How to centre the layout for header navigation

[ginhim]

Hey there,

I would like to centre the layout of my header navigation but am having trouble doing this correctly.

I have tried doing this myself by inspecting the header element and playing around with the code, then copying and pasting this into the custom CSS general options section.

I am having the following problems:
– When adding more links into the menu, the links spill over two lines
– When resizing the browser window, the horizontal scroll bar appears because the container is a fixed width

I can’t figure out how to achieve a centred header layout properly! A lot of your other themes have this option so hopefully you can help 🙂

Here is the code I used:

#main-navigation {margin-left: auto; margin-right: auto; width: 50%;}
#main-nav > div > div > div.span9 {width:1170px;}
nav#main-navigation .menu > li {margin-bottom: 40px}

Just want the logo in the centre, then the menu items centred under it. Thanks heaps!

[ginhim]

Sorry I forgot to list the problems I am having on the other breakpoints with above custom CSS:
– on tablet and mobile devices, the links in the hamburger menu have a very tall line height (lots of white space between them)
– The logo on mobile and tablet devices isn’t aligning to the bottom baseline of the hamburger icon

Thanks again!

[Kyle – SUPPORT]

Hi

Try this custom css:

#main-nav .row {
position: relative;
}
div#main-nav div.span9 {
width: 100%!important;
}
#main-navigation {
text-align: center;
float: none;
padding-right: 50px;
}
#main-navigation .menu li {
float: none;
}

#main-nav .header-right {
position: absolute;
right: 0;
}

– Kyle