Center Navigation Menu Tabs

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 15 replies, 6 voices, and was last updated 10 years by Swift Ideas – Ed.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Back to forum

Posted in: Pinpoint
August 13, 2013 at 7:22 am #16040

bigshots
Member

Post count: 2

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!

August 13, 2013 at 10:10 pm #16271

Cosmin – SUPPORT
Member

Post count: 3851

Hi,

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

Regards,

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

Cosmin
Support Assistant

August 26, 2013 at 12:55 pm #18136

bigshots
Member

Post count: 2

This reply has been marked as private.

August 27, 2013 at 7:42 pm #18419
Cosmin – SUPPORT
Member

Post count: 3851
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
August 29, 2013 at 9:57 pm #18925

bigshots
Member

Post count: 2

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

August 30, 2013 at 11:51 am #19102

Cosmin – SUPPORT
Member

Post count: 3851

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

October 8, 2013 at 11:23 pm #25866

usnraver
Member

Post count: 32

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

October 9, 2013 at 1:01 pm #25977
Cosmin – SUPPORT
Member

Post count: 3851
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
February 5, 2014 at 11:39 pm #47003

Lapidus
Member

Post count: 27

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

February 11, 2014 at 11:35 am #47879

Melanie – SUPPORT
Member

Post count: 11032

You can try setting 100% instead of 940px 🙂

February 11, 2014 at 9:39 pm #48110

Lapidus
Member

Post count: 27

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.

February 17, 2014 at 10:34 am #49508

Melanie – SUPPORT
Member

Post count: 11032

Can you post up your website URL?

February 17, 2014 at 10:22 pm #49738

Lapidus
Member

Post count: 27

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.

February 20, 2014 at 2:15 pm #50545
Melanie – SUPPORT
Member

Post count: 11032
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?
February 21, 2014 at 6:23 pm #50966

Lapidus
Member

Post count: 27

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!!
Back to forum

Posted in: Pinpoint