Align menu by height

[Oleg]

Hello!
By default, the menu is displayed as:

I want it to be so:

That is, I want to align the menu in the middle. What CSS is needed?

• This topic was modified 8 years, 8 months ago by Oleg.

[Tom]

Couple options:

a) Increase the height of your menu items in “Customize > Element Spacing”.
b) Add this CSS:

.nav-float-right .main-navigation {
    margin-top: 15px;
}

Adjust the px as needed 🙂

[Oleg]

Thank you! And how to set border radius in the background when you hover the link?

[Tom]

This should do it:

.main-navigation .main-nav > ul > li > a:hover {
    border-radius: 10px;
}

[Oleg]

Tom,
As I hover cursor shows that the border were straight. I made the video:

Video screenshot

[Tom]

Ah, there’s a slight transition happening from straight to curved.

You can apply the curve to the element at all times since it’s white on white anyways, and it should remove the transition:

.main-navigation .main-nav > ul > li > a {
    border-radius: 10px;
}

[Oleg]

Super!

[Oleg]

I lined the menu on the left side. However, I think that the menu has to be indented, as in other content (eg, 40 pixels). At the same indentation settings should remain the same (eg, 10 pixels). How to achieve this?

[Tom]

You could do that with this CSS:

.inside-navigation {
    margin-left: 40px;
    margin-right: 40px;
}

Then if you want to indent the color of the navigation bar as well, you’ll need to do this:

.main-navigation {
     background: #FFFFFF;
}

.inside-navigation {
    background: #222222;
}

[Author]

Posts