Changing background color on top level menu item on hover

khm's picture
khm
Thu, 07/26/2018 - 04:21
#1
Changing background color on top level menu item on hover

Hi

Been looking for a way to change background color on the top level menu item on action hover. 

Thought i found the setting under Design but it is not working. 

Could you pls advise on how to achieve this? 

The point is to highlight the selected top level item, for instance with a color equal to the background of the sub menu. 

It would also be ideal if this hover background color stayed when pointing across the different links in the menu itself. That way it would be easier to see what main/top menu item had been selected previously.  

Thanks!

Congnv's picture
Congnv
Fri, 07/27/2018 - 06:59

I tested, megamenu change color of top menu item successfully

There are 2 method:

Method 1: input your color code  ( not include '#')

http://prntscr.com/kbow66

http://prntscr.com/kbox5h

Method 2: use color picker

http://prntscr.com/kbp259

http://prntscr.com/kbp2k6

Note: please press ctrl + f5 or clear cache drupal if you Aggregate and compress CSS files after changing background color

Congnv's picture
Congnv
Fri, 07/27/2018 - 06:57

I tested, megamenu change color of top menu item successfully

There are 2 method:

Method 1: input your color code  ( not include '#')

http://prntscr.com/kbow66

http://prntscr.com/kbox5h

Method 2: use color picker

http://prntscr.com/kbp259

http://prntscr.com/kbp2k6

Note: please press ctrl + f5 or clear cache drupal if you Aggregate and compress CSS files after changing background color

khm's picture
khm
Mon, 07/30/2018 - 01:34

Thanks, won't work on this install. don't know why.  Have asked the people handling the install to look into it.
But will the rollover bgcolor in main menu stay if/when cursor is moved into submenu?

If not, can you tell me what css is needed to make that happen?

Thanks

cindy's picture
cindy
Mon, 07/30/2018 - 05:09

If you could not render background color, you can use the following custom css for megamenu top items:

+ Search id of megamenu and add css for megamenu:

/* all menu items */
#md-megamenu-1 li.awemenu-item > a:hover {
background-color: #7bb5a9;
}


/* only menu item level 1 */
#md-megamenu-1 li.awemenu-item.awemenu-item-level-1 > a:hover {
background-color: #7bb5a9;
}

+ If you want to keep parent menu's background color when hovering over submenu, you should put :hover in parent tag of tag <a>

/ *only menu item level 1 , keep bgcolor when mouse move to submenu*/
#md-megamenu-1 li.awemenu-item.awemenu-item-level-1:hover > a{
background-color: #7bb5a9;
}

+ If you want to apply css for all megamenu, just replace id with class name

For example:

.awemenu-nav li.awemenu-item.awemenu-item-level-1:hover > a{
background-color: #7bb5a9;
}

Check the screenshot:  http://prntscr.com/kcorfy

khm's picture
khm
Mon, 07/30/2018 - 08:01

Excellent, thank you Cindy! 

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.