Custmizing menu bar

  • Author
  • #1358265


    Hello! I’m working on a website for a friend. The menu bar stretches across the page, but there are only tabs along two-thirds of it. I would like to have it only as long as the number of tabs, and also to centre it under the website title. Any suggestions would be much appreciated. Thanks!

    The blog I need help with is



    PS: I’m using the Toolbox theme.



    PPS: Working on the site further, I realise it may not be possible to shorten the menu bar, but I would at least like to centre the tabs within the menu bar, so that they aren’t clustered all to the left. Thanks!


    You can try a centering technique: You center align a parent element with the text-align property, then you set the element you want centered to display as “inline-block”. I also removed the background from the #access div, and made it only visible in the menu items themselves. Give this a try:

    #access {
        background: none;
        text-align: center;
    #access ul {
        background-color: white;
        display: inline-block;

    Hope this helps :)



    Many thanks, Fabian! — alas, though, when I pasted it in at the bottom of my stylesheet, nothing happened. Any thoughts?


    Hi again @robertsjo,

    I tested it here again, adding this CSS to the bottom of your custom stylesheet with Firebug, and it seems to work. Do you mind checking your CSS for any missing semicolons or braces? Those things are pretty easy to miss, but they might make a big difference in how your CSS is processed.



    Hello Fabian,

    You’re right — it worked! Many thanks.

    Having done it, however, I felt it didn’t work as well as I’d hoped design-wise. Now I’m wondering if I can keep the white bar across the page, and centre the menu buttons in the middle of it, rather than having them grouped from the left. Any wizardly ideas??


    You just need to remove the background and background-color properties from the two CSS rules that I suggested previously.

    What I did previously was removing the background from the #access div (the one that goes across your page) to add it only to the menu items. Undoing this should take care of doing what you want :)



    Awesome, Fabian! Many thanks!

    One last thing (I hope!) — somewhere along the way, the menu bar has now become a little bit deeper than the buttons. Before, it was the same depth as the bottom (no extra white under the buttons). Any way I can go back to that? Thanks again!


    If I understood what you mean correctly, this should do it:

    .menu {
        vertical-align: middle;


    You’re a genius, Fabian! Many thanks! ! :)

The topic ‘Custmizing menu bar’ is closed to new replies.