Main menu overlay colors and rounding

This topic has 11 replies, 2 voices, and was last updated 2 weeks, 4 days ago by Luke Nielsen.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 15, 2024 at 10:53 pm #605271

denis-0229
Participant

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.

October 16, 2024 at 11:30 am #605390

Luke Nielsen
Keymaster

Hello,

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

Let me know if I missed something.

Kind Regards

October 16, 2024 at 11:36 am #605396

denis-0229
Participant

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.

October 16, 2024 at 3:04 pm #605462
Luke Nielsen
Keymaster
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
October 16, 2024 at 4:08 pm #605489

denis-0229
Participant

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

October 17, 2024 at 9:16 am #605663

Luke Nielsen
Keymaster

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

October 17, 2024 at 9:46 am #605687

denis-0229
Participant

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.

October 17, 2024 at 10:36 am #605709
Luke Nielsen
Keymaster
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
October 17, 2024 at 11:03 am #605720

denis-0229
Participant

Thank you.

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

I have entered it into global custom CSS field.

October 17, 2024 at 11:17 am #605725

Luke Nielsen
Keymaster

Hello,

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

Thank you for your time.

Kind Regards

October 17, 2024 at 3:38 pm #605819

denis-0229
Participant

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.

October 18, 2024 at 9:49 am #605973
Luke Nielsen
Keymaster
Hello,

Try to use the code below:
```
body .wd-sticky-nav-title {
    border-radius: 5px;
}
```
Kind Regards
Author

Posts