Menu config after 6.0 installation

This topic has 8 replies, 2 voices, and was last updated 4 years ago by Artem Temos.

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

Author

Posts
April 15, 2021 at 3:26 am #283030

hazesmokeshop
Participant

Dear Support,

I did an upgrade to version 6 and I lost my main menu configuration. The test website where I upgraded theme to 6.0 is located in /1/ where I need to correctly configure the menu navigation. My main site where the navigation is working correctly with the previous version is shown in /2/ for reference. I want the menu on version 6.0 to look similar to before. Also, I am sending the attached snapshot of what I am looking for.

thanks.

Attachments:
You must be logged in to view attached files.

April 15, 2021 at 6:59 am #283067
Artem Temos
Keymaster
Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.
```
.wd-header-nav,
.wd-header-nav .wd-nav-main,
.wd-header-nav .wd-nav-main > li,
.wd-header-nav .wd-nav-main > li > a {
	height: 100%;
}

.whb-header-bottom .wd-header-nav .wd-dropdown {
	margin-top: 0;
}
```
Regards.
April 15, 2021 at 9:50 am #283137

hazesmokeshop
Participant

Hi Artem,

Thank you very much for your help, the spacing issue on the main navigation is solved, however, it introduced a space to the sticky header menu. Please check the attached picture sticky-space.png. Secondly, I want to change the color of the main menu item on hover when navigating the drop down menu, this was working in the previous theme version but in this version it broke. Website in /1/ is using the previous theme version and we can see when we are navigating the drop down, the main menu item link is black. To make it more clear, I need the change the highlighted menu text color in Menu-2.png file when navigating the dropdown menu.

thanks.,

Attachments:
You must be logged in to view attached files.

April 15, 2021 at 2:27 pm #283261
Artem Temos
Keymaster
Try to replace the previous code with the following one
```
.wd-header-nav,
.wd-header-nav .wd-nav-main,
.wd-header-nav .wd-nav-main > li,
.wd-header-nav .wd-nav-main > li > a {
	height: 100%;
}
.whb-header-bottom .wd-header-nav .wd-dropdown,
.whb-clone.whb-sticked .wd-header-nav .wd-dropdown {
	margin-top: 0;
}
.whb-header-bottom .wd-header-nav .wd-dropdown:after,
.whb-clone.whb-sticked .wd-header-nav .wd-dropdown:after {
    height: 0;
}
html body .wd-nav.wd-nav-main .item-level-0:hover>a {
    color: #000;
}
```
April 15, 2021 at 5:55 pm #283321

hazesmokeshop
Participant

Hi Artem,

Thanks a lot for your help, it worked like a charm. One last question related to this.
Will you please provide me the code for changing the color of main sticky menu as well? I want to change the background of the active link to green and also on hover to green.

Thanks a lot.

Attachments:
You must be logged in to view attached files.

April 15, 2021 at 6:02 pm #283327

hazesmokeshop
Participant

Sorry I missed the text part. I will write it again here.
I want to change the background to green and text to white on hover as well as active link on the sticky main menu.

Thanks.

April 16, 2021 at 6:37 am #283441
Artem Temos
Keymaster
Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.
```
html body .whb-sticky-header .wd-nav.wd-nav-main .item-level-0:hover>a,
html body .whb-sticky-header .wd-nav.wd-nav-main .item-level-0.current-menu-item > a {
	color: white;
	background-color: var(--wd-primary-color);
	--nav-chevron-color: white;
}

.wd-nav > li.menu-item-has-children > a:after {
	transition: all .25s ease;
}
```
Regards.
April 17, 2021 at 12:03 pm #283837

hazesmokeshop
Participant

Hi Artem,

Thank you very much for your help and support. It works good now. You may close this ticket now.

Thanks,

April 18, 2021 at 6:39 am #283994

Artem Temos
Keymaster

Great, you are welcome!
Author

Posts