Gantry menu centering problem
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
How can you center the default Gantry Template main menu?
Here is the css code but it doesn't work.
ul.gf-menu {
list-style: none outside none;
width: 100%;
text-align: center;
}
In using developer tools, it shows the embedded <li> tags with this code:
.gf-menu li {
border: 1px solid transparent;
display: block;
float: left;
margin-right: 15px;
padding: 0;
position: relative;
text-align: center;
}
The ul.gl-menu 'text-align:center;' is marked out as it was overwritten by the '.gf-menu li' css declaration.
Any suggestions?
Luke - Just another old hacker!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
I resolved the problem by setting the width of the 'ul.gf-menu' to the combined width of the embedded 'li' links.
ul.gf-menu { list-style: none outside none; width: 385px; margin-left:auto; margin-right:auto; }
It's not elegant as the 'text-align' should have worked and if I add a link or remove a link, I'll have to change the 'width' value', but it works. :cheesy: - Just another old hacker!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Henning,
As this site is under development, I incorporated your change for the .gf-menu li a {display: inline-block;} and change the .gf-menu ul to include the 'text-align: center;". Didn't work. It was an exercise anyway as I have found a solution.
However, this does point out one problem since the 'compact' was deprecated in the UL tag as it takes the width of the container which it is embedded. In this case, it is the .rt-block which takes 100% width for 'header-a' as there are no other 'header' positions used. To be honest, I do see the logic in doing this via CSS verses have the old 'compact' parameter.
To be honest, I sometimes forget things like width inheritance. Guess it's old age creeping in. :cheesy:
Luke - Just another old hacker!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
if you would have posted a link I could have easily helped you.
Probably you just would have also to reset the float by adding
float: none;
to the li element.
Just sayin' ...
If you can live with a fixed width its ok.
You just need to adjust it each time you add or remove a menu item.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Henning,
I think when we go live with the site, I'll post it here and then we'll see about getting a more elegant solution.
Thanks.
Luke - Just another old hacker!
-
Time to create page: 0.068 seconds