Custmizing menu bar

robertsjo · Member · Jul 19, 2013 at 11:43 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
robertsjo · Member · Jul 20, 2013 at 12:14 am
Copy link
PS: I’m using the Toolbox theme.
robertsjo · Member · Jul 20, 2013 at 2:38 pm
Copy link
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!
fabianapsimoes · Member · Jul 20, 2013 at 5:32 pm
Copy link
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 :)
robertsjo · Member · Jul 20, 2013 at 8:35 pm
Copy link
Many thanks, Fabian! — alas, though, when I pasted it in at the bottom of my stylesheet, nothing happened. Any thoughts?
fabianapsimoes · Member · Jul 20, 2013 at 9:22 pm
Copy link
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.
robertsjo · Member · Jul 20, 2013 at 11:39 pm
Copy link
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??
fabianapsimoes · Member · Jul 21, 2013 at 3:06 am
Copy link
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 :)
robertsjo · Member · Jul 21, 2013 at 2:49 pm
Copy link
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!
fabianapsimoes · Member · Jul 21, 2013 at 2:56 pm
Copy link
If I understood what you mean correctly, this should do it:
```
.menu {
    vertical-align: middle;
}
```
robertsjo · Member · Jul 21, 2013 at 3:04 pm
Copy link
You’re a genius, Fabian! Many thanks! ! :)

No items found.