Menu mouseover color

hawkestfs
(@hawkestfs)

10 years ago

Hi,

Does anyone know the custom CSS required to change the mouse over color?

I think it uses the “default” site color but we have changed the normal menu background color to that so would like to have the hover over color as #232323

Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

wensolutionsupport
(@wensolutionsupport)

10 years ago
Hello,
Please try and add the following code to
Dashboard => Appearance => Customize => Design Options => Custom Css
```
#site-navigation .inner-wrap {
    position: relative;
    background-color: #289dcc;
}

#site-navigation {
    z-index: 999;
    background-color: #289dcc;
}

.main-navigation ul li:hover  a {
    color: #232323;
}
.main-navigation ul li.current_page_item  a, .main-navigation ul li:hover  a {
    color: #232323;
}
```
Hope this helps.
If your question has been answered, we would love if you would mark this topic as resolved in the right hand sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

Regards.
Thread Starter hawkestfs
(@hawkestfs)

9 years, 10 months ago

Hi,

Thanks – just got back to looking at this.

The following line doesn’t seem to do anything:

.main-navigation ul li:hover a {
color: #232323;
}

I’m using the following which gives me most of what I want but ideally I’d like the background colour of the individually hovered over menu cell to change colour.

#site-navigation .inner-wrap {
position: relative;
background-color: #cd1432;
}

#site-navigation {
z-index: 999;
background-color: #cd1432;
}

.main-navigation ul li:hover a {
background-color: #289dcc;
color: #232323;
}
.main-navigation ul li.current_page_item a, .main-navigation ul li:hover a {
background-color: #cd1432;
color: #ffffff;
}
Thread Starter hawkestfs
(@hawkestfs)

9 years, 10 months ago
Hi,

Just got to look at this again.

I’m using the following:
```
#site-navigation .inner-wrap {
    position: relative;
    background-color: #cd1432;
}

#site-navigation {
    z-index: 999;
    background-color: #cd1432;
}

.main-navigation ul li:hover  a {
    background-color: #289dcc;
    color: #232323;
}
.main-navigation ul li.current_page_item  a, .main-navigation ul li:hover  a {
    background-color: #cd1432;
    color: #ffffff;
}
```
But this line gets ignored:
```
.main-navigation ul li:hover  a {
    background-color: #289dcc;
    color: #232323;
```
I’m expecting only the currently hovered over menu item to change bg colour, not the whole drop-down.

Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Menu mouseover color’ is closed to new replies.

Tags