Custmizing menu bar

  • Author
    Posts
  • #1358265

    robertsjo
    Member

    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 juliadograbrazell.com.

    #1358358

    robertsjo
    Member

    PS: I’m using the Toolbox theme.

    #1358407

    robertsjo
    Member

    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!

    #1358420

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

    #1358427

    robertsjo
    Member

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

    #1358428

    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.

    #1358432

    robertsjo
    Member

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

    #1358435

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

    #1358440

    robertsjo
    Member

    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!

    #1358441

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

    .menu {
        vertical-align: middle;
    }
    #1358442

    robertsjo
    Member

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

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