Adding an extra tab to menu on header menu

drsarahb · Member · Apr 28, 2015 at 2:22 pm
Copy link

Add topic to favorites
I want to add a 5th tab to my header menu in the Delicious Magazine them which currently has 4 – Home, Food, Health and Supplements. If I add a 5th, it drops down to the second line and looks untidy. How can I widen the space available so all 5 tabs sit on one line? Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 28, 2015 at 11:20 pm
Copy link
Hi there, the main issue is there is only so much room in the header area to work with, and your title is taking up about a third of the available area. You can reduce the right margin on the title area to gain a little space by add the following and adjust the 64px value. I would suggest not taking it down too far as then your menu and title may look like they are running together.
```
#logo {
margin-right: 64px;
}
```
Another possibility would be to force the menu to 100% width which would make it go down below the title/description and give you the entire width of the site for menu items. If you wish to explore this, add the following instead.
```
.col-right {
    width: 100%;
}
.col-right .nav {
    float: right;
}
```
thesacredpath · Member · Apr 28, 2015 at 11:23 pm
Copy link
If the second solution above works for you, you can also add the following to make the menu items a little less tall.
```
.nav a {
    padding-top: 20px;
}
.nav .sf-sub-indicator {
    top: 24px;
}
```
drsarahb · Member · Apr 29, 2015 at 3:52 pm
Copy link
Thanks so much for your suggestions. The second option didn’t look right, so I woudl like to try to make the first option work. However, applying

#logo {
margin-right: 64px;
}

and changing the 64px to 60px or even 55px didn’t have any effect. The WordPress support helper suggested “As far as I can tell, you are at the limit of how much you can reduce the margin next to the logo. “
Do you have any further ideas on how I could reduce the title space? Many thanks for your input. Much appreciated, Sarah B
thesacredpath · Member · Apr 29, 2015 at 4:24 pm
Copy link
Sarah B, even with the logo right margin at 0, you probably aren’t going to gain enough to add another menu item, unless it had a very short label. Indeed, you have pretty much reached the limit of things. My only other suggestion would be to force the site title to two lines and then adjust some margins and paddings like this:
```
#logo {
    margin-right: 25px;
    max-width: 150px;
    padding-top: 0;
    margin-top: -40px;
    padding-top: 5px;
}
.site-title {
    line-height: 1.1;
}
```
See what you think with that.
drsarahb · Member · Apr 29, 2015 at 4:33 pm
Copy link
Thanks. Doesn’t look quite right either! Is there a way to reduce the tab widths slightly so the drop down menu sign doesn’t take up so much room? I just need to nudge that Home tab to the left by half a centimeter! thanks for your consideration. Sarah B
thesacredpath · Member · Apr 29, 2015 at 6:17 pm
Copy link
There is a minimum width set on the navigation tabs of 60px. You can lower that to perhaps 40px with the following. 30px seems to be the smallest it can be, but even at 30px, it looks decent.
```
.nav a {
    min-width: 40px;
}
```
drsarahb · Member · Apr 29, 2015 at 7:44 pm
Copy link
Thank you, I am really greatful. Works a treat. Can I help you with any nutritional medicine queries in exchange? Best wishes, Sarah B
thesacredpath · Member · Apr 30, 2015 at 9:27 pm
Copy link
Sarah, that’s great, glad that worked. I’ll keep you in mind on your kind offer. It is appreciated. :)

No items found.