Main menu overlay colors and rounding

Hello,

I am editing the site and I need to change the color of the main menu.

I know where to change the background color but I can’t find where to change the overlay color.

Also, I want to change the overlay rounding.

I need the menu to look like the one in the picture.

Attachments:

You must be logged in to view attached files.

Hello,

It seems that you have sorted it out – https://take.ms/nr4Mx

Let me know if I missed something.

Kind Regards

Hi,
please take a look at my picture.

I want to change the rounding of the overlay and also the color of the overlay and the text color needs to be white when hovered.

Hello,

1. Create such a rule in Theme Settings to change the color/hover color – https://take.ms/6b7Bi

2. Changed rounding:

.whb-header .wd-nav.wd-style-bg>li>a:before {
    border-radius: 5px;
}

.whb-header .wd-tools-element.wd-design-8 .wd-tools-inner {
    border-radius: 5px;
}

Kind Regards

Thank you.

Just one more thing, how do I change the color of the overlay part.

When I hover on the link, the text is ok, but I need to change the blue rectangle overlay to the dark blue primary color which is on my buttons and menus.

Thank you

Hello,

Please send me a screenshot of which link you mean, because on the previous screenshot, I cannot understand.

Thank you in advance.

Kind Regards

Hello,

I am talking about a rectangle which appears over the text when you hover on it.

Attachments:

You must be logged in to view attached files.

Hello,

Use the code below for help:

.whb-header .wd-nav.wd-style-bg>li:is(:hover,.current-menu-item,.wd-active,.active)>a:before {
    opacity: 1;
}

Kind Regards

Thank you.

BTW, these settings will stay active even after the update?

I have entered it into global custom CSS field.

Hello,

Yep, all customs from Theme Settings -> Custom CSS will be saved after the update.

Thank you for your time.

Kind Regards

One more thing.

Can you write me the CSS to make the sticky menu the same rounding as this menu?

Take a look at the picture.

The colors are ok, just the rounding needs to be the same.

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the code below:

body .wd-sticky-nav-title {
    border-radius: 5px;
}

Kind Regards

[Author]

Posts