Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • October 19, 2022 at 3:01 pm #1369411
    Sachs

    Hey Support
    I’m trying to change the background color. I have added the color #bbc7b6 to Menu Hover BG (Menu Links in overlay/slide out), but the hover-background color is still blue.

    What should I do now?

    I have seen ticket “how to change color of hover-background in burger menu of 17.02.2022.
    Where you are suggesting this CSS:
    ————————————————————————————————————————
    #top .av_header_transparency .main_menu ul:first-child > li > a:hover, #top .av_header_transparency .main_menu ul:first-child > li > a:focus, #top #wrap_all .av_header_transparency .sub_menu > ul > li > a:hover, #top #wrap_all .av_header_transparency .sub_menu > ul > li > a:focus {
    opacity: 1;
    }
    #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a:hover .avia-menu-text {
    color:#ff0197;
    }
    —————————————————————————————-

    1. Can I use this for changing the hover-background color?
    2. Should this be placed under Enfold child option or just Enfold child (General styling tab)?

    Best regards
    Lene

    October 19, 2022 at 4:42 pm #1369431
    Rikard

    Hey Lene,

    Please try this CSS:

    .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
    background-color: red;
    color: green; 
}

    It it doesn’t work, then please try adding !important after the colour, and before the ending semi-colon. Also remember to activate the option to delete the old CSS and JS files under Enfold->Performance temporarily, if the CSS doesn’t apply.

    Best regards,
    Rikard

    October 20, 2022 at 11:39 am #1369572
    Sachs

    Hey Rickard
    I have added the CSS, but still the same blue hover-background.

    You are writing some thing with please try adding…what should this be after and before the semi-colon?

    Best regards
    Lene

    October 20, 2022 at 3:08 pm #1369599
    Rikard

    Hi,

    It it doesn’t work, then please try adding !important after the colour

    I did that, and the CSS is working.

    Best regards,
    Rikard

    October 21, 2022 at 11:08 am #1369710
    Sachs
    This reply has been marked as private.
    October 21, 2022 at 4:13 pm #1369734
    Rikard

    Hi,

    Thanks for that. Please see this screenshot: https://snipboard.io/mRfcO6.jpg

    Best regards,
    Rikard

    October 24, 2022 at 2:39 pm #1369985
    Sachs
    This reply has been marked as private.
    October 24, 2022 at 3:28 pm #1370002
    Rikard

    Hi,

    Please try this CSS instead:

    .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
  background-color: #bbc7b6!important;
  color: #fff;
}

    Best regards,
    Rikard

    October 25, 2022 at 1:03 pm #1370154
    Sachs
    This reply has been marked as private.
    October 25, 2022 at 2:49 pm #1370177
    Rikard

    Hi,

    It looks correct on my end. How are you actually testing this? You know that there is no hover state on mobile devices, right?

    Best regards,
    Rikard

    October 25, 2022 at 3:00 pm #1370182
    Sachs
    This reply has been marked as private.
    October 25, 2022 at 4:24 pm #1370203
    Rikard

    Hi Lene,

    That’s what I pointed out in my last message; there is no hover state on mobile devices. If you are looking to alter some other state, then let us know.

    Best regards,
    Rikard

    October 25, 2022 at 4:46 pm #1370209
    Sachs

    Hi Rikard
    Thx. I understand your point with the hover state on mobile devices.

    I only would like to change the background colour from blue to the light grey. It hasn’t change after I added your new code.
    I tested on my mobile and devtool

    Please see here:

    View post on imgur.com

    Does it make sense? I call it background, maybe it is a wrong.

    I have used Enfold for many of my webprojects and I have only this issue with this demo of enfold.
    Please help me out.
    Best regards
    Lene

    October 25, 2022 at 7:13 pm #1370232
    Rikard

    Hi,

    Please try this instead, in order to target the active and focus states:

    .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:active, .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:focus  {
  background-color: #bbc7b6!important;
  color: #fff;
}

    Best regards,
    Rikard

    October 27, 2022 at 1:57 pm #1370456
    Sachs
    This reply has been marked as private.
    October 27, 2022 at 2:12 pm #1370458
    Sachs

    Hi Rikard
    It is fixed now. I changed the colours advanced colors under menu links in overlay.
    Please close ticket.
    Best regards
    Lene

    October 27, 2022 at 4:47 pm #1370471
    Rikard

    Hi,

    Thanks for the update, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘How to change color of hover-background in burger menu’ is closed to new replies.