Return to previous page

Main menu final touches - by filiphdan - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 4 years, 8 months ago ago by Rose Tyler

filiphdan

Participant

August 4, 2019 at 10:10

Hello,

I have take a screnshot of my main menu, i would like to add it some lines to separate them better, also would like to have them changing color wen hovering to a greyish or similar and maybe also underline, i send a picture in wich i draw what i mean:
https://prnt.sc/oo3uqa

I also think that each menu category is maybe with to mutch space between them? CATEGORYCATEGORY etc…

Thanks!

#218443 Copied Theme version: last WooCommerce version: last

3 Answers
Rose Tyler

Support staff

August 4, 2019 at 10:33
Hello,

Add this code in Theme Options > Custom CSS:
```
.menu-wrapper > .menu-main-container .menu > li,
.menu-wrapper > .menu-main-container .menu > li:hover {
    border-right: 1px solid #89c674 !important;
}
li#menu-item-7278 {
    border: none !important;
}
.menu-wrapper > .menu-main-container .menu > li:hover:after {
    content: "";
    width: 50%;
    height: 1px;
    background-color: #89c674;
    display: block;
    position: absolute;
    bottom: 0;
    left: 25%;
}
```
Hover color you can change via Theme Options > Typography > Menu > Menu 1 level (hover, active).
Space between menu items can be changed in Theme Options > Menu Menu styling > Main menu links > Menu links Paddings (left and right).

Regards
#218444 Copied
filiphdan

Participant

August 4, 2019 at 11:22

Thanks but wen i try to add that code in global custom css it gives me an error…

Also hoover does not seem to work….

Can you please check i leave my data.

Thanks!

Please contact administrator
for this information.

#218449 Copied

Rose Tyler

Support staff

August 4, 2019 at 12:11

1) Add the code in “Custom CSS for desktop” area.
2) The hover color works fine http://prntscr.com/oo4one Please clear cache.

Regards

#218454 Copied
Viewing 4 results - 1 through 4 (of 4 total)