Change Height of Main Menu

Hi glg46,
For the menu bar’s height, try this CSS on a custom CSS editor or a child theme’s style.css document:

#access {
  height: 50px;
}

This would make the menu bar 50px high. It’s up to you to set the exact height. If it’s going to be significantly higher, you’ll need to move the menu otherwise it won’t be vertically aligned. Add this CSS rule:

.menu {
  margin-top: 10px;
}

This moves the menu items 10px from the top. Simply adjust the px amount until it looks vertically centered.

I hope this helps.

Thank you for you response Antonietta. I tried the code and it adjusted the height and justification as you said, however it did not fix the problem I have. If you go to my website you will see a white area above the menu, I thought adjusting the height would remove it but it goes not. Trying to find a way to remove that top margin.

In fact, there’s a 10px margin top on the navigation bar. This is the CSS for the element:

#access {
    display: block;
    float: left;
    margin: 10px auto 0;
    width: 100%;
}

As you can see, the margin top is 10px. If you change this into margin: 0 auto; it should work.

Found the solution. by Changing the General Background color setting on the Color Settings

antonietta456 you are the greatest!!! Thank you that is exactly what I needed

That’s awesome, I’m so glad it worked.