Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 25, 2024 at 4:00 am #1440756
    CharlieTh

    /*How differentiate between background of hamburger on flyout and background of hamburger on header with no flyout*/
    .responsive .av-burger-menu-main span{
    background:yellow!important;}

    Example: If do above, both closed and open burger are background of yellow.

    If closed (actually see box with 3 hamburger lines)…is yellow.

    If open (when click on hamburger box, then menu flies out and shows X) — also has yellow background.

    I would like flyout menu to be different color…say, lime (so I can see the change).
    Another topic shows me how to change COLOR of the X, but I also want to change the BACKGROUND of the square that contains that X.

    Is there a way?.

    I’m playing with mobile menu on: https://calvarybaptistdunnellon.com/

    You can see change in symbol color…but haven’t yet changed background color…cuz doesn’t work for me!

    April 25, 2024 at 8:35 am #1440763
    Guenni007

    please remove your css code on that – because to many spans are selected – it is kept too general.
    on opened burger there is a new class on html : av-burger-overlay-active

    
/**** color of the bars***/
html.av-burger-overlay-active #top #wrap_all .av-hamburger-inner, 
html.av-burger-overlay-active #top #wrap_all .av-hamburger-inner::before, 
html.av-burger-overlay-active #top #wrap_all .av-hamburger-inner::after {
    background-color: red !important
}

/**** background color behind the bars***/
html.av-burger-overlay-active #top #wrap_all .av-hamburger {
    background-color: lime !important
}

    and if you like :

    /****  to get rid of those borders left/right  ***/
#top #wrap_all .av-main-nav > li.av-burger-menu-main a,
#top #wrap_all .av-main-nav > li.av-burger-menu-main:hover a {
  border: none !important; 
  background-color: transparent !important
}
    April 25, 2024 at 9:24 am #1440770
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you have any luck with that @charlieth?

    Best regards,
    Rikard

    April 25, 2024 at 11:15 pm #1440880
    CharlieTh

    Sorry, guys…have been having computer problems! This is WONDEFUL! I put it in immediately to test it out. Perfection.
    Thanks so much…was pulling hair out…now, it is safe!

    I think I have also gotten the background color of the hamburger when slideout is NOT slid… I put in bold purple just to see if that would be proper.

    /*** Actual hamburger before slide out?*/
    #top #wrap_all .av-burger-menu-main .av-hamburger {
    background-color: purple!important;
    }

    It’s a thrill to see it finally work properly. And, thanks, also for the “to get rid of those borders left/right” — it looked peculiar, but was concentrating on the other css. Appreciate you including that…looks MUCH better now.

    You can close this thread. Hope it helps others as much as it helped me!

    Weekend’s coming…hope you guys have a great one!

    April 26, 2024 at 8:45 am #1440920
    Rikard

    Hi,

    Great, I’m glad to hear that you got things working. Thanks again to @guenni007 for helping out.

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Different color of “hamburger” when flyout menu closed and when open’ is closed to new replies.