Need help? Check out our Support site, then

Custmizing menu bar

  1. 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

  2. PS: I'm using the Toolbox theme.

  3. 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!

  4. fabianapsimoes

    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 :)

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

  6. fabianapsimoes

    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.

  7. 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??

  8. fabianapsimoes

    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 :)

  9. 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!

  10. fabianapsimoes

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

    .menu {
        vertical-align: middle;
  11. You're a genius, Fabian! Many thanks! ! :)

Topic Closed

This topic has been closed to new replies.

About this Topic