Hello Summer Sale!
Exclusive season-opening discount on TheGem theme.
Limited time offer.
Get Now

Okay
  Public Ticket #3219848
hamburger menu
Closed

Comments

  • Annick started the conversation
    January 30, 2023 at 7:28pm

    hello! I need to change the hamburger menu visible on mobile for the word "MENU" instead of the small 3 lines.

    Where and how may I acheive this?

    Thanks

  •  7,280
    Oliver replied
    January 31, 2023 at 6:40am

    HI!

    CSS example:

    #primary-navigation .menu-toggle {
    font-size: 12px;
    font-weight: bold;
    font-family: 'Montserrat';
}
#primary-navigation .menu-toggle:before {
    content: 'menu';
    position: absolute;
    color: #fff;
    left: 0;
    width: 40px;
    height: 20px;
    z-index: 999;
    font-family: 'Montserrat' !important;
}
#site-header:not(.shrink) .header-colors-light #primary-navigation .menu-toggle > span {
    background-color: transparent;
}

     

    3938581396.jpg

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Annick replied
    January 31, 2023 at 4:02pm

    Hello!

    I was able to display the word "MENU", but the 3 toggle lines still appears BEHIND the word.
    PLease Help!
    Thanks

  •  7,280
    Oliver replied
    February 1, 2023 at 7:57am

    HI!

    Try this one:

    #primary-navigation .menu-toggle span {
    opacity: 0 !important;
}

     

    3938581396.jpg

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Annick replied
    February 1, 2023 at 2:13pm

    you are a life saver! thank you so much!

    Last question for you :

    How do I make my main menu the same width as the top-area and footer? Tried a hundred things without success.

    See attachment plz.

    Thank you very much

  •  7,280
    Oliver replied
    February 2, 2023 at 6:50am

    HI!

    CSS example:

    #primary-menu.no-responsive {
    left: 0 !important;
    display: flex;
    justify-content: space-between;
}
#primary-menu.no-responsive > li .site-logo {
    padding-top: 20px;
}

     

    3938581396.jpg

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver