[BParticipant]

I am having a problem getting my widget menu to behave how I want it to behave.

What I want is for:

• Active menu items to be purple #90529c
• Hover menu items to be orange #F07241
• Inactive / non-hovered menu items to be grey #eeeeee

I have implemented some custom CSS to achieve this as follows:

.widget_nav_menu li {
	background: #eeeeee;
}

.widget_nav_menu .current-menu-item > a,
.widget_nav_menu .current-menu-item > a:before
 {
    background: #90529c;
    color: #ffffff;
}

.widget_nav_menu ul li a:hover,
.widget_nav_menu ul li a:hover:before
 {
    background: #F07241;
    color: #ffffff;
}

This has pretty much achieved what I want, with the exception of “parent” navigation items changing to the background colour of the page when I hover over their child navigation items (sub-menu). As depicted in the attached screengrab, where I’d like “Getting to our hospitals” to be #eeeeee.

Can anyone help?

[BParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Thanks for writing in.

Please add this in your customizer’s custom CSS:

.widget_nav_menu.menu-item-has-children{
background: #eeeeee;
}
.widget_nav_menu.menu-item-has-children:hover{
background: #F07241;
}
.widget_nav_menu.menu-item-has-children.sub-menu{
background: #F07241;
}

Let us know how it goes.

Thanks.

[BParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

You can add this on top of your Custom > CSS in the Customizer.

.x-sidebar .widget_nav_menu ul li:hover {
    background-color: #eee;
}

Please check your whole custom css here: http://csslint.net/ and address all the missing bracket issues.

Thanks.

[Author]

Posts