Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 7, 2022 at 3:20 pm #1357553
    ivanglaser

    Hi
    If you go to my website (url) below you will see that I have a menu item called “SAFARI”
    When you mouuse over “SAFARI” you havea sub-,emu wiyh 2 items
    But if you mouse-over those 2 items, you dont get an indicator showing your selection.
    Is there a way to get a background colour to show as you mouse over?
    Thanks

    July 7, 2022 at 5:32 pm #1357582
    Rikard

    Hey ivanglaser,

    Please try the following in Quick CSS under Enfold->General Styling:

    ul.sub-menu li:hover a {
  color: #fff; 
}

    Best regards,
    Rikard

    July 8, 2022 at 12:54 am #1357612
    ivanglaser

    Hi
    That didn’t work.
    I have this code to make the sub-menu transparent…perhaps that’s why your code doesn’t work ?

    /* Transparent sub-menu */

    .header_color .main_menu .menu ul li a, .header_color .main_menu ul ul {
    background-color: transparent!important;
    }

    Ive seen other sites (maybe not Enfold) where the sub-menu is transparent but there is a semi-transparent background colour on hover

    Tx
    Ivan

    July 8, 2022 at 7:00 am #1357621
    Nikko

    Hi Ivan,

    Yes, that’s correct and that code also prevents the hover color from appearing (because of !important), please remove that code and replace it with this one:

    #top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .av-main-nav ul {
    background-color: transparent;
}

    If the hover state does not need to use a transparent background color then go to Enfold > Advanced Styling and select Main Menu sublevel links again (make a new one), check the Apply only to mouse hover state, then tweak the Font Color and Background Color.
    Here’s a screenshot (

    If you want the hover state to have a transparent background then use this code in Quick CSS:

    #top #wrap_all .av-main-nav ul > li:hover > a {
    background-color: rgba(255,255,255,0.5);
}

    Just adjust the RGB color value as well as the opacity.
    Hope this helps:

    Best regards,
    Nikko

    July 8, 2022 at 11:22 am #1357669
    ivanglaser

    Hi

    I tried that and it omly half worked

    When I applied this code

    #top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .av-main-nav ul {
    background-color: transparent;
    }

    It kind of did what I wanted on the sub-menu … but it resulted in the menus and logo’s shifting from near the edges of the screen (left and right) towards the middle

    July 8, 2022 at 8:48 pm #1357743
    Rikard

    Hi,

    Thanks for the update. Applying a background colour to elements should not shift anything, could you add the code back and highlight the problem in a screenshot please?

    Best regards,
    Rikard

    July 8, 2022 at 11:58 pm #1357752
    ivanglaser

    BEFORE CODE

    https://madaboutmara.com/wp-content/uploads/2022/07/After-code.jpg

    July 8, 2022 at 11:59 pm #1357753
    ivanglaser

    Sorry…

    AFTER CODE

    July 9, 2022 at 11:13 am #1357767
    Nikko

    Hi ivanglaser,

    Thanks for providing us the screenshot.
    This code should not shift the layout because it does not target layouts:

    #top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .av-main-nav ul {
    background-color: transparent;
}

    however since you mentioned that I think the greater than symbol (>) might be changed to & g t ; (without the spaces)
    If it still shifts the layout then please revert back to your old code and then use this code for hover:

    #top #wrap_all .av-main-nav ul > li:hover > a {
    background-color: rgba(255,255,255,0.5) !important;
}

    Hope it helps.

    Best regards,
    Nikko

    July 9, 2022 at 11:59 am #1357778
    ivanglaser

    Hi Nikko

    I don’t quite follow what you are saying above but I removed my code and inserted this :

    #top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .av-main-nav ul {
    background-color: transparent;
    }

    #top #wrap_all .av-main-nav ul > li:hover > a {
    background-color: rgba(255,255,255,0.5) !important;
    }

    …and that has worked !

    Thank you for your help

    Ivan

    July 9, 2022 at 12:40 pm #1357781
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘background indicator on sub-menu mouse-over’ is closed to new replies.