[Bookmama]

I have a customer who doesn’t like the “gap in tabs” on the menu — see where the black shows dark blue to the left and right of the item being hovered over.

The site is: http://www.youdeservetobehappy.com — if you want to see, though I don’t think it’s unique to me.

Can you tell me what stylesheet element might allow me to reduce or eliminate the gap between tabs?

Thanks,
Anne

[Sakin]

@Bookmama: I see that you have added padding in left and right of menu item in your custom css box.

#header-menu ul.menu a {
    padding-left: 50px;
    padding-right: 50px;
}

It’s not good as it will add padding in mobile devices as well. So, check it well. You can add that only for large devices like following.

@media screen and (min-width: 1060px) {
#header-menu ul.menu a {
    padding-left: 50px;
    padding-right: 50px;
}
}

About the gab between menu tab. There is as the menu is center. You can remove that only by aligning menu either left or right. So, you can add the following CSS in “Appearance => Theme Options => Custom CSS” box to align it left.
#header-menu ul.menu li { float: left; }

[Bookmama]

Okay, thanks. Wow…. you can figure out my custom css so easily. Can you also see when I am eating junk food and slacking off? ha ha….

I guess the bottom line is this person was looking to somehow have the menu items completely fill the menu area, but seems like the only way you could do that would be to hardcode their size, or is it possible to put in a width of 20% if I know there are 5 items and therefore have them each take up 1/5 of the menu??

[Sakin]

@Bookmama: I don’t think you can do that way. But you can add the following CSS in “Appearance => Theme Options => Custom CSS”.

@media screen and (min-width: 1060px) {
#header-menu ul.menu li { float: left; }
#header-menu ul.menu a {
    padding-left: 54px;
    padding-right: 53px;
}
}

[Bookmama]

Okay, thanks… one last question. Is there a way to eliminate the line between menu options — the black that I’ve circled in the image here:

As always thanks for your super prompt and helpful replies! Your support makes a good theme, great!

[Sakin]

@Bookmama: I told you to add the CSS in Theme Options panel. But I haven’t see that you have added css. If you add the following CSS in theme options panel then it will work perfect.

@media screen and (min-width: 1060px) {
#header-menu ul.menu li { float: left; }
#header-menu ul.menu a {
    padding-left: 54px;
    padding-right: 53px;
}
}

[Bookmama]

THANKS!!! That did fix it. I thought I had made that change before, but must somehow have not saved it. I kept adding padding until the space on the right-hand side also went away. I ended up with:

@media screen and (min-width: 1060px) {
#header-menu ul.menu li { float: left; }
#header-menu ul.menu a {
padding-left: 71px;
padding-right: 71px;
}
}

Obviously if we need to add tabs or change text in the menu, that padding will have to be changed. But other than that, is there any problem you see with the larger padding number that I used over what you had?

Thanks again for all the help.

[Author]

Posts