Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It looks centred to me, http://snag.gy/ExoWd.jpg , could you explain further your issue?
Hi thanks but where must I insert this code??
Ok I have inserted it but still no change does it take a while though??
Ok i have inserted a the code no change I tried changing this code
}
.top-navigation li,
.bottom-navigation li{
text-align:left;
float:left;
position:relative;
}
Made the text align center it did not work it put all the text under each other in the center???
Sorry. Tested it, but only works for menus that are on a single line. If the menu overflows onto the line below then it breaks. Not really ideal.
Put this in the very top options box.
For top menus:
<script type="text/javascript">
jQuery(document).ready(function($) {
var listwidth = 0;
$('ul.top-navigation > li.menu-item').each(function() {
listwidth += $(this).outerWidth( true );
});
var containerWidth = $('div.top-navigation').width();
var paddingleft = (containerWidth - listwidth)/2;
var finalcontainerwidth = (containerWidth - paddingleft);
$('ul.top-navigation').css({'padding-left': paddingleft, 'width':finalcontainerwidth});
});
</script>
For bottom menus:
<script type="text/javascript">
jQuery(document).ready(function($) {
var listwidth = 0;
$('ul.bottom-navigation > li.menu-item').each(function() {
listwidth += $(this).outerWidth( true );
});
var containerWidth = $('div.bottom-navigation').width();
var paddingleft = (containerWidth - listwidth)/2;
var finalcontainerwidth = (containerWidth - paddingleft);
$('ul.bottom-navigation').css({'padding-left': paddingleft, 'width':finalcontainerwidth});
});
</script>
Thanks for that it really helped….Just one thing when I click on the menu and it is busy loading it jumps to the left side when its loading and moves back to the center
THANK YOU SO MUCH it helped me so much that problem by the way is only on firefox 🙂 thx
It works on latest versions of FF, Chrome, Safari,Opera and also on IE8.
It flicks to the center – yep, that’s JQuery for you. It’s the least-worst solution that I’ve found and I spent a LOT of time looking.:-)
Loading JQuery in different places in the document – makes no difference, tried that.
Update: incidentally if your website resizes on phones etc. (responsive design) then the menu might well then flow onto the next line and break – it’s not a pretty sight.
