Adding space between menu with CSS

CMS & WordPress
1

Hello, my first time to this site and wow I love it and decided to join. I’m worried my question has already been answered but after searching I’m not seeing the solution or maybe to clueless to see the answer before my eyes so here goes my first post.

On this website: https://www.plasticwelding.net I am trying to add a little space above and below the grey main menu via CSS. I noticed I can do so with

.menu {
margin: 10px 0px 10px 0px;
}

However it seems to ignore the bottom which from what I can tell is due to margin collapse? Adding
.menu {
margin: 10px 0px 10px 0px;
float: right;
}
overcomes that but I notice there appears to be a second grey bar somehow attached to the menu. Any advice you can give to correct this would be great.

what the futtz
what the futtz1917×927 213 KB

2

I’m not getting that second grey bar on Firefox or Chrome on Windows.
BTW, I wonder if this would be better answered on the WordPress subsection rather than HTML?

3

Thank you for checking. Right now I removed the css edit so the bar is under the menu I assume. Only when I add
.menu {
margin: 10px 0px 10px 0px;
float: right;
}
is it showing up.

4

Hi,

You have this rule as a parent of .menu.

#primary-menu, #navigation {
    font-family: "Arial Black", "Bevan", "Arial", serif;
    text-transform: lowercase;
    font-size: 14px;
    font-weight: bolder;
    overflow: visible;
    height: 25px;
    margin: 0 0 0px 0;
    z-index: 100;
    background: #d1d2d4 url(images/navbg.jpg);
}

It has a height of 25px which means that anything you do to the children (such as increase their height or margins) will have no effect once the 25px height is breached. The elements will just overlap and have no effect on the flow.

Remove the 25px height and remove the float from .menu and the margins should take effect.

2 Likes
5

Paul, thank you a ton. That did the trick.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.