Switch The Normal Divi Menu To the Hamburger Menu on Smaller Screens

If you’ve got a particularly wide menu that’s wrapping on smaller screens, there’s an easy fix for it. Using a simple media query, you can swap the normal desktop menu out for the mobile version (hamburger – the three horizonal bars you see on mobile phones). Add the following CSS and adjust the max-width to determine when the hamburger replaces your normal Divi menu.

A max-width of 1024 pixels should be good to wrap on tablets but by increasing this amount you can achieve the same effect on smaller desktop and laptop screens.

I’m sure that will take care of some of your headaches.

Update:

If you have a particularly large menu, you might encounter problems with it not scrolling properly on smaller screens, the following CSS should fix that for you:

Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.

$ Donation Amount:

Choose Your Donation Amount:

Personal Info

First Name *

Last Name

Email Address *

Donation Total: $4.99

17 Comments

Adam on 03/29/2017 at 11:49 am

Thanks Rob

Andres on 04/03/2017 at 6:23 pm

Hey Rob! i found your website by googleing few things for divi.

I think it is awesome what you are doing here, but i see that there is such a small amount of content, are you planing on uploading some more?

Rob Hobson on 04/03/2017 at 7:40 pm

Thanks Andres, glad you’re enjoying the content. Would love generate more, just need to find the time. Freelancing, my day job, family, and life keep my pretty busy. What I’m working on at the moment is a Divi layout pack which I’m hoping to publish here in the next week or so.
Reply

Ken Hitsman on 05/19/2017 at 5:50 pm

Het Rob, Great tip and I really needed something like this for a site I’m finishing up. I seem to have a problem tho. The menu switches to the Hamburger now which is great, but when I try to scroll the drop down menu in landscape mode on an ipad mini it actually scrolls thru to the web page. In other words I can not scroll down thru the menu. This action is happening in Chrome and Safari. Portrait mode works as usual (scroll thru menu) The web addy is http://kenhitsman.com/lp/home any help would be appreciated. Thanks.

Rob Hobson on 05/24/2017 at 6:45 pm

Hi Ken,

You can use the following CSS to enable the menu to scroll:
https://gist.github.com/robhob/c02f9450e9e48bd80f270be59f24507f

Reply
- Janos Biro on 03/21/2018 at 4:46 pm
  
  You saved my life man, thx! 🙂
  Reply

Andy on 06/23/2017 at 6:52 am

Thanks Rob, this helped us out immensely!

Rob Hobson on 06/23/2017 at 9:26 pm

Glad to have helped. 🙂
Reply

Jesus on 07/15/2017 at 12:35 pm

Hi Rob I have a question about menu and logo in small screens. How to change the height only in mobile devices .My problem is that the hamburger menu and logo look likes perfectly in ipad or similar but not in smaller screens. Any idea or solution about this?
Many thanks for your help.

Rob Hobson on 07/15/2017 at 8:43 pm

Hi,

I think this will help:
http://divinotes.com/increase-the-size-of-your-divi-mobile-logo-and-menu-text/
Reply
- Jesus on 07/16/2017 at 1:18 pm
  
  Hi Rob .
  I read your link and it’s very useful and the solution to my problem.
  Thanks again .
  Reply
  - Rob Hobson on 07/16/2017 at 7:28 pm
    
    Glad to hear you came right.
    Reply

Benito on 12/03/2017 at 9:42 pm

Brilliant, tnx a lot!

aaron on 04/26/2018 at 12:59 am

Hi – I’m actually looking to do the opposite as I’m not a fan of the hamburger menu for my site – is there anywhere with instructions to go back to a normal menu?