SOLVED How do I center the main menu in header-a position?
-
-
- Tim Burkart
- Hero Rocketeer
- Posts: 272
- Thanks: 21
-
Hi,
This is probably really simply however I can't figure it out.
Could someone please advise me on how to center the main menu on my test site?
site - REMOVED
Gantry 4.1.9
Joomla 2.5.9
Thank you! - Last Edit: 9 years 4 months ago by Kat05.
-
The following users have thanked you: Tanya Flores
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
this is doing the trick:#rt-header .menu-block { float:left; width:100%; position:relative; } #rt-header ul.gf-menu { clear:left; float:right; position:relative; right:50%; text-align:center; width: auto; } #rt-header ul.gf-menu li { display:block; float:left; position:relative; left:50%; } -
The following users have thanked you: Tanya Flores
- Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Tim Burkart
- Hero Rocketeer
- Posts: 272
- Thanks: 21
-
Thank you very much Shazdeh! I greatly appreciate your help
-
-
-
- James Steele TCH
- Jr. Rocketeer
- Posts: 45
- Thanks: 1
-
This post helped me well, however as seen in the enclosed graphic, when I centered my main menu, the dropdown item text is no longer in the dropdown background. Where do I make these adjustments?
This image is hidden for guests.
Please log in or register to see it.
Thank you for your help...
-
-
-
- Millidge
- Jr. Rocketeer
- Posts: 31
- Thanks: 1
-
James,
Did you solve your issue?
If you know how to use firebug (firefox inspection tool) and you can figure out the specific css path of each dropdown menu option, you can reset the float and left commands to this:
float:none; left:0
However you would have to do this for each dropdown menu item, and I would prefer a more elegant solution if anyone can offer one.
-
-
-
- Sergio Di Mare
- Rocketeer
- Posts: 96
- Thanks: 10
-
Try:
#rt-header .menu-block { float:left; width:100%; position:relative; }
#rt-header .menu-block > ul.gf-menu { clear:left; float:right; position:relative; right:50%; text-align:center; width: auto; }
#rt-header .menu-block > ul.gf-menu > li { display:block; float:left; position:relative; left:50%; }
-
Time to create page: 0.115 seconds