Changing background color on top level menu item on hover

khm

Thu, 07/26/2018 - 04:21

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

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

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

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

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

Mon, 07/30/2018 - 08:01

Excellent, thank you Cindy!

Changing background color on top level menu item on hover

Have More Idea?

We are here to build your website!

Changing background color on top level menu item on hover

You are here

Have More Idea?

We are here to build your website!

Welcome back, Buddy!

Hi New Comer!