Change menu background color on hover

Richard · October 9, 2015

I'm using a standard SM horizontal menu site wide. On the dropdown sub-menus, the background gets a little brighter on hover. I'd like the same to happen with the main menu entries. Seems like it ought to be standard behavior. I have tried to tweak the site wide CSS, but haven't found the correct selector--there are sooooo many to choose from :rolleyes. Has anybody done this?

Hikin' Mike · October 9, 2015

I'm using this on my drop-downs:

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .sm-page-widget-nav .yui3-menu-children a:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover {    
    background: rgba( 0, 0, 0, .1 );
    }

Hikin' Mike · October 9, 2015

Just re-read your question. Try adding this:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
	margin: 0;
	padding: 0;
	}
.sm-user-ui .sm-page-widget-nav-color-default a { 
	padding: 10px;
	}
.sm-user-ui .sm-page-widget-nav-color-default a:hover {
	background: rgba( 255, 255, 255, .1 );
	}

Richard · October 9, 2015

Thanks, Mike. That's close--the main menu now shows a highlight on hover. But it's screwing up the dropdown, which is not showing the > indicator for submenus. I'll play around with it some and see if I can get it to behave.

Edit: OK, taking out the padding seems to work for the > indicator. But the menu is no longer pinned, at least not in the preview. That's wrong. :bash

Hikin' Mike · October 9, 2015

Try this:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
    margin: 0 !important;
    padding: 0 !important;
    }

.sm-user-ui .sm-page-widget-nav-toplink > a {
    padding: 10px;
    }

.sm-user-ui .sm-page-widget-nav-color-default a:hover {
    background: rgba( 255, 255, 255, .1 );
    }

Richard · October 9, 2015

That last code looks and acts fine, but the pinning is still broken in preview.

Hikin' Mike · October 9, 2015

Richard wrote: »

That last code looks and acts fine, but the pinning is still broken in preview.

I don't understand?

Did you actually save the changes?

Richard · October 9, 2015

Hikin' Mike wrote: »

I don't understand?

Did you actually save the changes?

I saved them but did not publish them. I viewed them in Preview. I'm going to try to add a position attribute to see whether that fixes it.

Hikin' Mike · October 9, 2015

Fix what? I just tried it on my site and it works. Since I don't want that hover, I removed it...but it worked for me.

Richard · October 9, 2015

The menu pinning is broken. Your menu scrolls off the top--I want mine to always be visible at the top of the screen. My production version works that way because I selected pinned header in the site-wide layout. Your code handles the hover stuff perfectly, but it breaks the pinning of the header. BTW, I tried adding position attributes to your code, but (depending on the value) it either had no effect or it made a total wreck of things.

Hikin' Mike · October 9, 2015

Got it. I don't pin mine, so I guess it's different. Time for bed...

Richard · October 9, 2015

Thanks for trying, Mike. Much appreciated.

Richard · October 9, 2015

Followup:

Mike's code was correct. In fact, all that was necessary was the line

.sm-user-ui .sm-page-widget-nav-color-default a:hover {     background: rgba( 255, 255, 255, .1 );     }

What's strange is that pinning didn't work in preview, but does work when published.

Anyway, a big thanks again to Mike and to Smug Hero Oliver, who wisely ignored my claim that I had tried publishing to no avail. I'm guessing I must have had several sessions open and tried it in the wrong one.

Hikin' Mike · October 9, 2015

Richard wrote: »
Followup:

Mike's code was correct. In fact, all that was necessary was the line
.sm-user-ui .sm-page-widget-nav-color-default a:hover {     background: rgba( 255, 255, 255, .1 );     }
What's strange is that pinning didn't work in preview, but does work when published.

Anyway, a big thanks again to Mike and to Smug Hero Oliver, who wisely ignored my claim that I had tried publishing to no avail. I'm guessing I must have had several sessions open and tried it in the wrong one.

Glad to hear.

The extra code I posted allows you to have some room around the nav text.

Richard · October 9, 2015

Right--I'll probably add some padding to the left and right, but I've had enough fun for today.

Change menu background color on hover

Comments