Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 2, 2024 at 7:32 pm #1429150
    Enfoldfanatic

    Hi guys,

    I have already found some threads regarding this topic but none of the solutions worked out (example: https://kriesi.at/support/topic/add-text-menu-below-hamburger-menu-icon/). I would like add simply add the text “Menu” below the hamburger menu. What is the proper snippet to achieve this?

    Thanks and regards,
    Enfoldfanatic

    January 3, 2024 at 4:30 pm #1429187
    Guenni007

    well i would not use the hidden : .avia_hidden_link_text nor pseudo-containers because there is allready an existing “caption”
    use the hidden strong container inside av-hamburger-box !
    synchronize the media query with the hamburger “break point”
    f.e:

    @media only screen and (max-width:989px) {
  #top .av-burger-menu-main .av-hamburger-box strong {
    display: block !important;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #000; /*** edit this to your needs ****/
  }
}

    you have to adjust the color for this and think of transparency option too.

    for example you can use the variable color definitions:

    @media only screen and (max-width:989px) {
  #top .av-burger-menu-main .av-hamburger-box strong {
    display: block !important;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--enfold-header_burger_color); 
  }
  #top #header.av_header_transparency .av-burger-menu-main .av-hamburger-box strong {
    color: var(--enfold-header_replacement_menu_color); 
  }
}
    January 3, 2024 at 4:52 pm #1429189
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    January 3, 2024 at 11:45 pm #1429217
    Enfoldfanatic

    Hi @guenni007,

    Thanks for your help! Would it be also possible to adjust the hamburger + menu text position slightly? I would like to move the both a bit up since the hamburger is currently not aligned vertically in the mobile menu anymore.

    Thanks and regards

    January 4, 2024 at 8:05 am #1429241
    Guenni007

    if you got a link on your private Content field – i could not see this as participant.
    So maybe a mod should adjust it for you.

    btw: if you got the hamburger icon from the beginning the media query aren’t needed!

    you can put inside the same media query to have then complete:

    @media only screen and (max-width:989px) {
  .responsive #top .av-burger-menu-main  {
    top: -5px
  }
  #top .av-burger-menu-main .av-hamburger-box strong {
    display: block !important;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--enfold-header_burger_color); 
  }
  #top #header.av_header_transparency .av-burger-menu-main .av-hamburger-box strong {
    color: var(--enfold-header_replacement_menu_color); 
  }
}

    colors if burger menu is active – f.e.: 

    #top .header_color .av-hamburger--spin.is-active .av-hamburger-inner, 
#top .header_color .av-hamburger--spin.is-active .av-hamburger-inner::before, 
#top .header_color .av-hamburger--spin.is-active .av-hamburger-inner::after{
  background-color: #FFF;
}

#top .av-burger-menu-main .av-hamburger--spin.is-active .av-hamburger-box strong {
  color: #FFF ;
}
    January 4, 2024 at 12:00 pm #1429260
    Enfoldfanatic

    Just perfect @guenni007!

    Thanks and regards

    p.s. This thread can be closed.

    January 4, 2024 at 12:03 pm #1429263
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, 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 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Add text “Menu” below the hamburger icon on mobile’ is closed to new replies.