Okay
  Public Ticket #4176467
Mobile Menus
Open

Comments

  • Richard started the conversation

    I have noticed that the background to our mobile menu has changed from black to white, and can't find how to edit this. The article here https://sonaar.io/docs/how-to-change-header-mobile-menu-and-offcanvas-menu/ doesn't help, as I can't see how to edit an example slide down menu - only the box where the hamburger lives.

    Also, I can't make the search on here click through to the public tickets - the search shows 13 results, but when I click on it nothing happens. I am sure one of these tickets would have the answer!

    Attached files:  Screenshot 2025-07-22 165625.png

  •  689
    Alexandre replied

    Hi,

    The Nav Menu element (https://drops.sonaar.io/i/eFXSKv) doesn’t look very good on mobile—that’s why in our demos, we don’t use it on mobile.

    In our demos, we use two different header sections for mobile and desktop, which we show or hide depending on the device type.
    Here you can see the desktop header section: https://drops.sonaar.io/i/Wv7mXQ
    And here’s the header section for tablet and mobile: https://drops.sonaar.io/i/tOdbEz

    In the mobile section, we use the offcanvas to open the menu. It looks much better and allows for more customization: https://drops.sonaar.io/i/yQ6iVs

    It seems the mobile section was probably deleted. I recommend rebuilding it.
    You can duplicate the header section and replace the menu in the new section with the offcanvas. Then, adjust the responsive settings of both sections to hide the first section on mobile and tablet, and hide the second section on desktop.

    Thanks,


    Alexandre from the Sonaar.io Crew

  • Richard replied

    Ah, I have worked out what was going on. Somehow the whole mobile section had got set to be hidden, and the desktop section was in use for all screen sizes, with just the menu section doing the switching off and on responsively - which I assume is the old menu style you were referring to. I changed the responsive settings for the top section to be only for desktop and laptop, then set the second section (the mobile version) to be showing for tablet and phone.

    Not sure whether this was caused by an update of the Sonaar addons or what, but it's fixed now!

  •  689
    Alexandre replied

    Hi Richard,

    Indeed, it’s much better now. I’m glad you were able to restore the mobile menu successfully.

    Thanks,


    Alexandre from the Sonaar.io Crew