Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 12, 2018 at 4:59 pm #896631
    NicomIT

    I’m having problems targeting the CSS to place a solid background color on a left menu item on the a:hover state. I was able to change the background for the active menu item, but can’t seem to get this to work. See the page below. The active menu item in the left menu (Hotels & Accommodations) is how I want the a:hover to look as well. Thanks!

    January 13, 2018 at 1:18 pm #896885
    Rikard

    Hey NicomIT,

    You should be able to set that under Enfold->Advanced Styling.

    Best regards,
    Rikard

    January 13, 2018 at 10:32 pm #896956
    NicomIT

    Hi Rikard,
    I had a look under those settings and it looks like there are only options to modify the main menu and not the secondary/left column menu. Is there an option for that I am not seeing that you can provide me?
    Thanks.

    January 13, 2018 at 11:12 pm #896967
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    li.current-menu-item:hover {background: red !important; }

    Best regards,
    Mike

    January 15, 2018 at 2:55 am #897306
    NicomIT

    Hi Mike,
    That changes the mouse-over on the menu item for the page you are on. But what I actually need to do is specify the mouse-over for each menu item. Not just for the current menu item. I also only need to apply this to the menu in the side bar. The CSS you provided applied the change to the side bar menu as well as the menus in the footer widget area. Is there a way to make the change I need to just the side bar menu?
    Thanks!

    January 15, 2018 at 5:44 am #897381
    Rikard

    Hi,

    If you need to target each one individually then you can find the ID’s of each menu item if you inspect them in your browser. Your events item for instance:

    #menu-item-38:hover {
  background:green !important;
}

    Best regards,
    Rikard

    January 15, 2018 at 4:40 pm #897624
    NicomIT

    Thanks Rikard. That worked. However, I can’t seem to change the color of the text on the mouse over, just the background color. Here’s the code I am using:

    #menu-item-1638:hover {
	color: #fff !important;
	background-color: #002A46 !important;
}
    January 16, 2018 at 4:34 am #897853
    Mike

    Hi,
    Sorry, I’m getting confused, your code above is for white text and a dark blue background on hover, right now they show that. Which seems to match your opening post.
    please see screenshot in Private Content area, and advise.

    Best regards,
    Mike

    January 16, 2018 at 2:32 pm #898038
    NicomIT

    Thanks for the reply Mike. I was able to figure out how to change the text color.

    January 16, 2018 at 7:46 pm #898139
    Mike

    Hi,
    That is good to hear, shall we close this then?

    Best regards,
    Mike

    January 16, 2018 at 7:47 pm #898140
    NicomIT

    Yep. I’m good now. Thanks Mike.

    January 17, 2018 at 3:06 am #898264
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Adding a Backround Color for Left Menu Item on Mouse Over’ is closed to new replies.