Home Forums Weaver Xtreme Theme Menu Container background to change on Hover

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #69728
    ROBIN
    Participant

    This is for PenelopesPets.com

    I have checkout out the guide and also inspected the page, but I am struggling to code this and I don’t know why.  I think I am missing something.

    When someone hovers over my menu area, I would like the background to change to the same color as when they hover over a page in the main menu.  I am fine with the sub-menus, it is just the main menu bar I want to change color upon hover.

    Thanks for any help you can give, I know this is an easy fix, but I am just missing something.

    #69729
    scrambler
    Moderator

    More details would be nice.

    What menu, Big menu bat below the header image, or small one at the top right?

    As for the background, are you saying the menu bar background (whichever it is) should be grey like the menu item background when we hover on a menu item of the main menu bar.

    If we are speaking about the main menu bar, there is the background of the menu items themselves ( inner area around the menu items), and an outer area beyond that, are we speaking of both becoming grey so the menu item hover wont be noticeable, or just the outer area or just the inner area?

     

    #69730
    ROBIN
    Participant

    Sorry, I am talking about the Black part of the Main Menu bar.  The one with the products in it below the header.

    My inspiration is Luxury Candles and Home Goods | Mack n Gnosh – Mack N Gnosh  The menu bar goes from transparent to white.

    OH, I do see what you are saying about it being the same color, I think that would be ok, I didn’t realize it would override the page hover but that makes sense because it would just be an all-over hover.

    #69731
    scrambler
    Moderator

    Then, you first need to set the Menu Items BG to Transparent

    Then add the rule below to the Custom CSS rule box

    .menu-primary .wvrx-menu-container:hover {background-color:grey;}

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.