How to display mobile 'hamburger' menu also on desktop?

visioncraft
visioncraft Member Posts: 162 Learner
in Ask a Question

Hi all!

I have a website where I want the menu to always be displayed via a 'hamburger' menu — i.e., I want the 'mobile' menu to actually be the 'default' menu on the website, and for it to be displayed on all viewport sizes.

Is this possible to do at all in Duda?

Tagged:

Best Answers

  • Thomas_Connery
    Thomas_Connery Member Posts: 264 MVP
    Answer ✓

    Wow. Didn't notice that - likely because I rarely use Editor 2.0. Yes, from what I can see, there is no header option on desktop to easily leverage a mobil or hamburger menu on desktop. I'd contact support on this one. You may need to request this feature.

    Here's where to change the header options in Editor 2.0: (BASIC HEADER - Edit Design)

    Screenshot 2024-07-19 at 6.49.52 PM.png

  • d3nz311
    d3nz311 Member Posts: 2
    Answer ✓

    @visioncraft not by default as others have stated. However I found a workaround using CSS. Within your editor, If you go into Dev-Mode and scroll down to the Site HTML/CSS select and open the site.css you can override and force the mobile hamburger-menu to display on desktop (or all screens for that matter) with this css:
    @media (min-width: 1025px) {
    #layout-drawer-hamburger {
    display: flex !important;
    }
    }

    This forces screen-sizes above 1024 (tablet) to display the mobile hamburger menu. I believe the media query is redundant and could be discarded.

    Keep in mind you'll need to adjust the default desktop menu.

Answers

  • Thomas_Connery
    Thomas_Connery Member Posts: 264 MVP

    If I understand your question correctly, you should be able to. Modify this setting:

    Theme - SITE LAYOUT - Desktop/Tablet, then click the Expandable menu option.

    This will convert your desktop and tablet view to use a mobile menu.

    Screenshot 2024-07-18 at 2.14.29 PM.png




  • visioncraft
    visioncraft Member Posts: 162 Learner

    Thank you, @Thomas_Connery — unfortunately, the 'Site Layout' option does not seem to be available within the Theme settings for sites using the new Editor 2.0… 😳 😱

    Do you know whether the 'Site Layout' option has moved somewhere else?… Or are we supposed to use a different approach in the new Editor 2.0?…

  • Thomas_Connery
    Thomas_Connery Member Posts: 264 MVP

    Looks like the mobile menu on desktop is not yet available in any Editor 2.0 headers. I'd submit an idea or feature request.

Categories