Center Navigation Menu Tabs

[bigshots]

I would like the main navigation menu tabs to be centered in the navigation menu. By this, I don’t mean the text in the tabs but the actual tabs. Is this possible?
Thanks!

[Cosmin – SUPPORT]

Hi,

Do you mean the whole menu centered on its own line?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[bigshots]

This reply has been marked as private.

[Cosmin – SUPPORT]

Hi Robert,

1. You would need to disable the AUX options in the Header theme options and use this custom CSS:

#main-navigation > div {
    display: table;
    margin: 0 auto !important;
}

#main-navigation {
    margin: 0 auto !important;
    width: 940px !important;
}

2. Which IE version? Is it still happening with the code change above?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[bigshots]

Hi,
Thanks for that advice – it worked very well. There is also no further problem with IE.
Regards,
Robert

[Cosmin – SUPPORT]

Glad to hear that Robert, cheers!

If you like the product and support, please take a moment to rate our theme in your ThemeForest downloads area, we would greatly appreciate it!

Regards,
————————————————————————————————————

Cosmin – Support

[usnraver]

I used the same code – it centered the menu items however the menu items do not show on mobile??

[Cosmin – SUPPORT]

Try wrapping that code in a media query, so it only applies to desktops. Like so:

@media screen and (min-width:1025px) {
#main-navigation > div {
    display: table;
    margin: 0 auto !important;
}

#main-navigation {
    margin: 0 auto !important;
    width: 940px !important;
}
}

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[Lapidus]

Hello!

I tried the code and it works correctly. The problem I see is that it’s set to a width of 940px. How can I modify that code to work fine on any width? (1170 px, 640px, etc…)

Thank you very much.
Damian

[Melanie – SUPPORT]

You can try setting 100% instead of 940px 🙂

[Lapidus]

Hi, Melanie!

I tried to put it at 100%, but the menu appears moved to the left. I have reviewed the styles with Firebug and I see that the menu is centered within the <div class=”span9″> (that has sizes fixed , in my case 870px). It should appear centered within the <div class=”container”>.

What can I do? Thank you very much.

Best regards.
Damian.

[Melanie – SUPPORT]

Can you post up your website URL?

[Lapidus]

Hi, Melanie.

The URL is: http://www.lovelypaper.es/newweb-lp/

There you can see that in full size, the menu is centered. But if you make the navigator smaller or see the web in a tablet, you can see that the menu is moved to the right.

Thank you for your help!!
Damian.

[Melanie – SUPPORT]

Hmm try adding this custom css:

@media (max-width: 979px) and (min-width: 768px) {
#main-nav .span9 {
width: 538px;
}
#main-navigation {
margin: 0 auto !important;
width: 100%;
}
}

Let me know if that worked!

Maybe this

#main-nav .span9 {
width: 538px;
}
#main-navigation {
margin: 0 auto !important;
width: 100%;

}

will work for everything?

[Lapidus]

Hello!

It works!!! But I had to change this code:

#main-nav .span9 {
width: 538px;
}

to:

#main-nav .span9 {
width: 100%;
}

Then it works perfectly in my computer and in the tablets. I have to see if I add one tab more to the menu if it appears centered in the page or not. I’ll tell yo.

Many thanks!!