Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.
Hire Us

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,121
    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,121
    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

    Attached files:  Capture091144.png

  •  7,121
    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