Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Pinpoint › Center Navigation Menu Tabs
New Landing › How can we help? › Themeforest Theme Support › Pinpoint › Center Navigation Menu Tabs
- This topic has 15 replies, 6 voices, and was last updated 10 years by Swift Ideas – Ed.
-
Posted in: Pinpoint
-
August 13, 2013 at 7:22 am #16040
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 #16271Hi,
Do you mean the whole menu centered on its own line?
Regards,
————————————————————————————————————
Cosmin
Support AssistantAugust 26, 2013 at 12:55 pm #18136This reply has been marked as private.August 27, 2013 at 7:42 pm #18419Hi 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 AssistantAugust 29, 2013 at 9:57 pm #18925Hi,
Thanks for that advice – it worked very well. There is also no further problem with IE.
Regards,
RobertAugust 30, 2013 at 11:51 am #19102Glad 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 #25866I 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 #25977Try 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 AssistantFebruary 5, 2014 at 11:39 pm #47003Hello!
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.
DamianFebruary 11, 2014 at 11:35 am #47879You can try setting 100% instead of 940px 🙂
February 11, 2014 at 9:39 pm #48110Hi, 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 #49508Can you post up your website URL?
February 17, 2014 at 10:22 pm #49738Hi, 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 #50545Hmm 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 #50966Hello!
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!!
-
Posted in: Pinpoint
You must be logged in and have valid license to reply to this topic.