[Resolved] Primary menu – round corners on hovers

[ammgbr]

Hello,

I have used the following CSS provided to a previous user for the purpose of creating rounded corners on the primary menu on hover:

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

The issue is when I hover on to a submenu item, the initial menu category no longer has rounded outline.
I would appreciate any input.

[Ying]

Hi there,

Try change your CSS to this:

.main-navigation ul li.menu-item.sfHover a, .main-navigation .main-nav ul li:hover a {
    border-radius: 3px;
}

[ammgbr]

Thank you Ying, that works 🙂

[ammgbr]

May I clarify: what is the maximum px value that can be used? I tried making the hover background thinner but I think it won’t go beyond 25px?

Many thanks

[Fernando]

Hello there,

The max would be radius of an imaginary circle that may be created in relevance to the corners of your container.

In your container, the max radius would be 22.5px since the height of your container is 45px.

See this for a more in-depth explanation: https://stackoverflow.com/questions/29966499/border-radius-in-percentage-and-pixels-px-or-em#:~:text=Pixel%20and%20other%20units

Hope this clarifies!

[ammgbr]

Many thanks for you reply, that clarifies this

[Fernando]

You’re welcome!

[Author]

Posts