How To Show A Divi Mobile Hamburger Menu On Desktop Tutorial by Pee Aye Creative

How To Show A Divi Hamburger Menu on Desktop

This quick Divi tutorial and code snippet will show you how to easily change the Divi Menu module into a hamburger menu on desktop.

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.3

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Show Divi Hamburger Menu On Desktop

It is becoming more and more popular to have a hamburger menu displayed as your menu on a desktop site. With the new Divi Menu Module, it is easy to display the mobile version of the menu, the hamburger menu, on the desktop site with some CSS code.

So you may ask, what is the code doing? The CSS snippet is simply displaying the existing mobile menu on a wider screen size, and hiding the existing desktop menu on that same screen size. Nothing is being added or deleted, they are simply shown at different screens sizes based on the width designated in the code.

 To show the Divi hamburger menu on desktop, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save.

/*show hamburger menu on desktop*/

@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none;
}

.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
}
}

You may also need to remove the bullet icons that now show in the dropdown list items. You can remove those with this snippet:

.et_pb_menu .et_mobile_nav_menu li {
    list-style-type: none;
}

Can I Show Both A Regular Divi Menu AND Hamburger Menu on Desktop?

Why yes, of course! And yes, there are times where this would be needed, and with the new Divi Theme Builder, you can now show both a regular and a hamburger menu on desktop side by side.

How does this work? The trick here is use the same CSS snippet that we used above, but to add a CSS class to it so that we only target one of the two Menu Modules. This will only make the one Divi Menu molule into a collapsed hamburger menu and leave the other untouched.

This time, we created a custom CSS class called “pa-hamburger-menu” which we need to add to the Divi Menu Module. This needs to be added in the advanced tab custom CSS toggle in the CSS class input area.

/*show hamburger menu on desktop for specific menu module*/

@media (min-width: 980px) {
.pa-hamburger-menu .et_pb_menu__menu {
    display: none;
}

.pa-hamburger-menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
}
}

Want To Do The Oppposite?

We have a separate tutorial on How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon! This is very helpful and popular for keeping the menu open on mobile. Go check it out!

How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon Tutorial by Pee Aye Creative

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.3

Last updated Jan 29, 2022 @ 11:52 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

150 Comments

  1. Vera Schafer

    What a coincidence! I was looking for a tutorial this morning and here you are. Thank you, Nelson!

    Reply
  2. Chris Marsh

    Hi, thanks so so much for this – I wanted the full menu on the mobile version to match the desktop, not the hamburger and your code worked first time. I had previously tried, read and watched many other articles and none of them worked! 🙂

    Reply
  3. Marco

    Hi, very useful, but I have an issue with the mobile burger menu on desktop.

    It work very well, but near the link (ex: home, about, and the other links) it show a bullet point, just linke it is an

      . How can I cancel that bullet point?

      Thank you

    Reply
  4. Rafa

    Hi Nelson,
    Thanks for this useful piece of css!
    Just I have a small problem because you still see the bullets…

    Any idea?
    Many thanks

    Reply
  5. Stephen

    Great thanks! How do I change a) color of the menu and b) make it bigger – It looks very small on desktop (and without enlarging it on mobile)

    Thanks again for the info 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Stephen, all those settings are there in the Menu Module. For all the settings, you can click on the responsive icon and make the changes for desktop, tablet, or phone.

      Reply
      • Stephen

        Thanks a lot, will definitely check it out – Not sure why I didn’t think of that :-0

      • Stephen

        Hi,
        Once again, thanks for the info. It looks great on mobile but on desktop there is a blue “bullet point” appearing before each menu item (which doesn’t look good at all) These don’t show on mobile at. How can I get rid of these bullet points on desktop that it looks the same as it does on mobile (i.e. no bullet points)
        Thanks in advance,
        Stephen

        P.S. I posted the website URL below

  6. Raghunath

    Has something changed in the last few updates? I’m trying this with the divi menu module and it doesn’t seem to work.

    Reply
  7. Jan

    Hi! I tried to add the snippet to show hamburger icon menu on my site but seems it is not working and showing the same regular menu. Can you help? https://thefitnesskitchenme.com/thevault/

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jan,
      this tutorial is for the Menu Module. I see that you are using the default menu instead, so the code is completely different and will not work.

      Reply
  8. Amin

    Hi Nelson,

    Thank you for this great tutorial, would you be able to show us how to create a full-page fly-in menu in a future video?

    Reply
  9. Segun

    Is it possible to make the menu displayed once mice hover the hamburger? If yes, can you please help out. Thanks.

    Reply
  10. Jon Mynette

    Hey Nelson. Great tip. I have two menus, one smaller on the top bar of the main header and one being the main nav. Could I change the smaller menu to show the desktop version on phone and leave the main nav to show the hamburger?
    Thanks in advance!

    Reply
  11. Marc W Rabinowitz

    How would I remove the hamburger from the footer menu and keep the hamburger for the top menu?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Marc,
      Just add a unique CSS class to each. One to target the mobile one, and one to target the desktop one. Kind of like our second feature in this tutorial 😉

      Reply
  12. Ro Al

    Hi, thanks for the post.
    I use the first code:

    /*show hamburger menu on desktop*/

    @media (min-width: 980px) {
    .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none;
    }

    .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
    }
    }

    Working but only in homepage, when I go to another page I see a regular menu. What can I do?
    Thanks for your help.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Ro,
      You’ll have to give us some context. Where are you putting the code, and what header are you using? Default, Theme Builder? Is it different on each page? And I’d also need the link.

      Reply
      • mathis

        hi man, i have the same problem, I put the code in the divi buildr as you have done. but when I click on a product, the product page doesn’t show the burger menu. its just the regular menu. What should I add in this code to make it works in my product page ? :

        /*show hamburger menu on desktop*/

        @media (min-width: 980px) {
        .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
        display: none;
        }

        .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
        display: flex;
        float: none;
        margin: 0 6px;
        align-items: center;
        }
        }

        thanks a lot man

      • Hemant Gaba

        Could you please share the URL of the page for us to investigate further?

  13. Gord

    I needed to show a desktop and mobile menu on mobile so I used your code for showing both types of menus on desktop and switched some things to work on mobile. Here is what I did:

    @media (max-width: 980px) {
    .pa-desktop-menu .et_mobile_nav_menu {
    display: none;
    }

    .pa-desktop-menu .et_pb_menu__menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
    }
    }

    I worked so I imagine this is the way to do it.

    Thanks for the super helpful tutorials.

    Gord

    Reply
    • Sarah Cauble

      Thanks for this, Gord! Your code snippet worked for me too. I needed to have two menus and only have one show the desktop version on mobile.

      Reply
  14. Mayuresh

    Hello Nelson,

    Can you make a video on how to add a sidebar menu on mobile just like the way you added on this website? (Menu items shows up from right side)

    Reply
  15. Sam

    Thank you for this tutorial, Nelson!

    I was wondering if this code could be used on a theme builder to generate the same top navigation layout as the one on https://wearegoodinbread.com/

    Looking forward to your response.

    Reply
      • kumar

        yes please

      • Hemant Gaba

        Hi there

        The answer to your question is yes, the above code can help you to showcase the hamburger icon of the Theme Builder Header on the desktop. To replicate the header of the given URL you just need to create three column row and in the extreme left column add the Menu Module, in the center add the logo image and in the right column add the cart icon. After that use the given code to showcase the hamburger icon at the place of menu items.

        Let us know how it goes. 🙂

  16. Armando

    Hi Nelson, do you know how to apply the changes only in one specific page? Thanks so much!

    Reply
    • Armando

      I figured it out, ignore that!

      Reply
      • iCHRIS

        I’ll really need your help on this. How did you manage to get it done please?

    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Armando,
      Sure, any time you want to apply a CSS snippet to a specific module you can just add the CSS class in that particular module. So instead of .et_pb_menu replace that with something of your own and match that by placing it in the Menu settings>Advanced tab>Custom CSS class.

      Reply
      • lisa

        Hi can you expand on this a little. Trying to do this just for one or two pages myself.. Thanks in advance

      • Nelson Lee Miller (aka The Divi Teacher)

        Sure Lisa, this is a common question but hard to explain more. I’m not sure how else I would explain it. Just add a custom class to the module and in the code instead of using the global .et_pb_menu. So yo might replace that with anything like .my-menu-module and then add my-menu-module in the module.

  17. Stephen

    Hi Nelson

    Great tutorial.

    I have another nuance I would LOVE to code for but I can’t get it right & would it would be great if you could help me out!

    Essentially, I wish to switch from the ‘Default’ Divi Header Style at the breakpoint which is best for me (happens to be 1045px) to ‘Centered’ Divi Header Style for tablets and then to ‘Hamburger’ for a mobiles (I don’t know that breakpoint measurements yet, but say, for the sake of example 800px).

    Unless I am mistaken, I should be able to keep a ‘proper’ menu for smaller devices last longer at smaller widths, as my logo will be displayed above the menu items, not in line, thus freeing up width-space by making the menu area taller instead.

    I think the baby I am trying to target is .et_header_style_centered but I may have that wrong and certainly am failing to achieve what I want.

    I really hope to hear from you and many thanks in anticipation!

    Stephen

    (BTW a site which achieves this—nothing to do with me but which I wish to emulate— can be seen here )

    Reply
      • Stephen

        Hi Nelson

        Thanks for your super-quick reply—amazing.

        I am still having trouble, mainly as I am a rank amateur (a photographer really, not a web-designer.

        I went to your other post (which I hadn’t seen) but unfortunately I still don’t seem to be able to achieve what I am after.

        My attempt at the CSS to get the  ‘Centered’ Divi Header below 1045px is as follows:

        @media only screen and (max-width: 1045px) {
         .et_pb_menu .et_header_style_centered {
             display: block; 
          }
         .et_mobile_nav_menu {
            display: none
          }
        }

        Any ideas what I am doing wrong??

        Thank you again

        Stephen

      • Stephen Hyde

        BTW All your hard work here on the forums pays off. I have through this discovered your  Divi Responsive Helper and purchased it. Can’t wait to streamline my workflow. It looks awesome! (one comment is that it wasn’t easy to find a ‘Purchase’ option – it isn’t on the page I have linked to!

      • Nelson Lee Miller (aka The Divi Teacher)

        Hey Stephen,
        That’s great to hear! Hmm, so you found my docs page first? I never thought of adding a purchase link on my docs page, but I guess I could do that. Just figured that was usually the place existing customers go after the sale.

  18. Macy Ryan

    How would you make the menu items only appear if the hamburger icon is clicked?

    Reply
  19. KB James

    how can i use the hamburger menu on the secondary top menu bar?

    Reply
  20. diana

    I have a client site that needs a menu redo and I want to use the theme builder. However there is a secondary menu and a main menu. How do you combine the two for phone view like what happens in the default menu?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Diana,
      For that you would have to do a workaround, so have three menus in WordPress>Appearance Menus, one for Main Menu, one for Secondary Menu, and one for Mobile Menu. Then hide the Main and Secondary menus on mobile, and hide the Mobile on Desktop. That’s the easiest way. There are some plugins that I believe would do this for you in one menu, like showing and hiding certain menu items on mobile. I’ll look into that and maybe make a tutorial.

      Reply
      • Diana S Nashif

        Thank you Nelson, I thought that would be the case. A tutorial would be awesome. You are my go to guy for things I need to do on my sites!

  21. Mike

    Hey – amazing site and wealth of information!! So happy I landed upon it. Now bookmarked and on the top of my divi resources.

    Is there a way to make the hamburger menu open to full screen (without using fullwidth menu).

    Our site has two menus and a logo in the middle, So when opening hamburger menu to open it on full page ?

    Besides that kudos on the knowledge you are sharing !!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Mike,
      Thanks for the bookmark, I hope you continue to find my resources helpful! I have been playing around with a fullscreen menu tutorial, it is quite a hack but if I refine it enough I will share it!

      Reply
  22. Patricia Meyer

    No matter what I’ve tried, I can’t get the code for the Divi Menu Module to work. I’m trying to use it while using the Divi Theme Builder and building a custom header. The header is currently not available.

    Reply
  23. Diggi

    Hi, thanks for the good work and inspiration!!! I used the code and it works well, but is limited to 980px. Even if I change it to e.g. 1920px (I want to have the hamburger icon on full screen) it’s not working. Any idea how to achieve this?

    Reply
  24. Dillon Sherlock

    Is this process different when building out the menus in the theme builder? I’ve got it to work when building it out on a page, but it won’t work in the theme builder for some reason.

    Reply
      • Dillon Sherlock

        Sorry, should’ve clarified. I’m trying to display two menus. One regular menu, with a hamburger menu to the right displaying a few more items. I’ve followed your tutorial, and it works as it should when editing a page. When I try to replicate the process in the theme builder, it’s not working properly.

  25. tépè

    Bonjour et bravo pour votre tuto cela m’a été très utile.
    Je rencontre quand même un problème, le sous-menu (texte en blanc) reste ouvert en permanence 🙁
    Y’a-t-il un moyen qu’il ne s’ouvre qu’au clic sur le texte “Toutes les Robes de Cœur” ? Avec un petit signe “+” à droite du texte !
    Merci par avance
    Le site en question : https://newsite.robedecoeur.fr
    ———————–
    Hello and congratulations for your tutorial, it was very useful to me.

    I still encounter a problem, the sub-menu (white text) remains open permanently 🙁

    Is there a way that it only opens when you click on the text “All the Robes of Heart”? With a small “+” sign on the right of the text!

    Thank you in advance

    The site in question: https://newsite.robedecoeur.fr

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Okay this is totally unrelated to this tutorial. You are asking about how to collapse submenu items. I believe Elegant Themes has a tutorial on that. I may create one myself as well.

      Reply
      • tépè

        Thank you,
        does the problem come from the fact that this menu is built in the Theme Builder,

      • Nelson Lee Miller (aka The Divi Teacher)

        No this is the same for both the default menu and the Menu module.

  26. Bill Patterson

    Just what I was looking for. I have a client who does not like the full width menu to wrap when he makes the browser window narrower but not as narrow to flip to the hamburger menu. How to keep it from wrapping and just let it run off the right side of the window?

    Reply
  27. Nikki Fryn

    Another wonderful tutorial that solved my menu on mobile need!!

    Thank you, Nelson. Your tutorials are invaluable!

    Reply
  28. cordi

    Thank you for this great tutorial. Please help me, I’m getting crazy…. I want to have the hamburger icon in black….tried all the settings and css, but it stay in this custom blue…..

    Tried even this, but nothing is working:

    .mobile_menu_bar {
       color: #000000 !important;
    }

    Reply
  29. Cato

    Hi Nelson, thanks for the tutorial. I’ve tried it but it does not work for so not sure where I’m going wrong. I’ve added a FW menu via the Divi Builder in a FW section and then added your code in the advanced/CSS bit but the menu does not change from regular to hamburger as per the below.

    http://anafranchini.com/

    I’ve inspected the element and I can’t see anything wrong with the element values. I am not using the Divi theme though, just the editor. Any idea what I might be missing?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Canto,
      I assume FW must mean Fullwidth, which is the answer. This isn’t about the Fullwidth Menu, and there really isn’t any good reason to use that over the new Menu module.

      Reply
      • Cato Rolea

        Hi Nelson, I tried with the regular ‘new’ Menu module as well but it’s still the same. Any other idea why this is not working in my case?

  30. GoldieR

    Ive just used this code, and am having trouble styling the dropdown. There are blue dots on the menu items, and the menu is broken by the other normal menu element below.
    Any advice to style the dropdown would be much appreciated

    Reply
  31. Mario

    I don’t see any change using this code. Im building a header and is not creating the hamburguer menu

    Reply
  32. Jacob

    I have another scenario… I want to show the mobile menu only on mobile and the desktop menu on tablet view. So I took your last snippet on this page and changed the media query to:@media (max-width:1325px) and (min-width:981px). But it did not work 🙁
    Any suggestions? Maybe a topic for a tutorial.

    Reply
  33. Steve Smith

    This was really useful – thanks!

    Reply
  34. Elisandro Borges

    Wow, Nelson! That is awesome! Thanks a lot!

    Reply
  35. Dennis

    Hi,

    This is fantastic, thank you so much for this!

    I have a wierd question;)

    I want to have two menu’s and one have to change to a hamburger menu when it goes to the mobile version and the other one don’t. Is this possible?

    Reply
  36. Remco Bijl

    Hi, great tutorial, but where I’m looking for is a hamburger menu in the top right of heads and when click on it the menu wil appear in the center of the header instead of the right side slide in. Is that a option?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Remco,
      Sounds like you want a fullscreen menu, this is not a feature in Divi. I have a tutorial I am trying to perfect and will release if I do!

      Reply
  37. Brad Watts

    Thank you! Works perfectly. How can I customize the hamburger color on desktop?

    Reply
  38. Erika

    Hello, very nice tutorial’s

    I tried to additional play a bit with 3 menu modules (3colom row) in a custom global header.
    Top Left | Top Middle | Top Right

    So, the result is that the page will have 3 Hamburgers. The goal is to force 1
    Hamburger, among each other 🙂

    The question is, how to get control through CSS to each of the Hamburger. When debugging
    I see that the class et.mobile_menu got ul id’s e.g. mobile_menu1, mobile_menu2 and mobile_menu3.

    So the Burger should be shown only in the Top Middle.

    Do you have a hint?

    Erika

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Erika,
      I don’t think I understand what you are trying to achieve. You say “force 1 hamburger among each other” do you mean combine them all on mobile? If so that’s not possible, that would be related to the WordPress menus and not really to the Divi menu. If you want to hide two of the menu modules on mobile you can do that in the advanced tab with visibility settings.

      Reply
  39. Henry

    Very helpful, thank you! Would it be possible to configure the Divi menu to work like the one here?
    https://www.conradarchitects.com/

    • Dropdown menu items are side by side and drop down from the top of the page
    • Hamburger menu is fixed to the top of the page
    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Henry,
      Anything is always possible. You can certainly add two menus and make one fixed, but as for the dropdown the way it works exactly like that would need custom coded.

      Reply
      • Henry

        Thanks for the reply. Just taking the fixed question for now. Why would you need two menus to make one fixed?

      • Nelson Lee Miller (aka The Divi Teacher)

        Sorry I was just thinking about ways to replicate that, since it is not something out of the box. I’m not sure how to achieve that, would take some time to sort out with code.

  40. Maria Lindgren

    Thanks for this tutorial. I have finally got a hamburger menu that I have wanted for a long time. The change I do not get right is the color of the hamburger menu. It is white and I want it black. Tried all color settings in menu settings but it does not work. Do you have any suggestions?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Maria,
      If the setting is not working I would recommend asking Elegant Themes. You can share the link and I can look at the code to see if you have it overridden.

      Reply
  41. Joe Fawcett

    Is there any way to stop the menu moving around the screen on different resolutions

    Reply
  42. Thao

    Thank you for the tutorial! I added a text before the hamburger menu (under class: pa-hamburger-menu) using ::before. Do you know how I could make that word clickable like the hamburger icon? Thank you

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Off hand I am not sure, I do have a similar type of tutorial coming at some point for making a fullwidth clickable area but I am not sure how to make the Menu word clickable.

      Reply
  43. Josh

    This is great, thanks for this.
    Any advice on how to fix the dropdown menu (When clicking the new hamburger on desktop) it’s super glitchy when hovering with a mouse.

    + On mobile the dropdown menu loads behind some of the page elements

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Josh,
      Not sure about the glitch, but if something is loading behind other things then it sounds like a simple z-index issue. You can compare the z-index in the menu module to the row, or other modules and make the menu a higher number.

      Reply
  44. Richard

    this works great but when I go to the shop page the original nav is back in play rather than the traditional hamburger. Does anyone know how to overcome this?

    Reply
  45. Jim Jacobs

    Hi Nelson, Thanks very much for your Divi Menu Module tutorials! These are helping tremendously. Have you published the tutorial on how to make the desktop hamburger menu show a full-screen or slide-in menu? I can’t tell if I’m not seeing it on the site. This is exactly what my design needs, so it would be wonderful!

    Reply
      • Jim Jacobs

        OK. Thanks for letting me know. I’ll be patient 😉

  46. Morten Ladefoged Jensen

    Hi Nelson. Tried to put the snippet “Hamburger Menu on Desktop” into my Child Theme style.css, but it doesn’t seem to be working? Any ideas? I’m using the built-in DIVI menu… not a global header in the Builder.

    Reply
  47. james

    hey, this is not working for me with the latest divi and wp core. any chance you could update this? thanks for sharing

    Reply
    • Hemant Gaba

      I am afraid that we are not able to replicate the issue on our end as the code is working perfectly fine. Could you please share the URL of your website and tell me what you are trying to achieve so that I could investigate further?

      Reply
  48. richa

    Hi, Kindly refer to the syntax errors that I’m facing :

    Unexpected token
    Expected Rbrace

    Reply
    • Hemant Gaba

      Expected Rbrace error comes when we open the curly bracket to add the CSS properties but forgets to close it. For example:

      .selector{
      width: 100%;
      color: red;

      Here the closing curly bracket is missing and it will throw the error: Expected Rbrace

      Please make sure that you have opened and closed the curly braces properly.

      Let us know how it goes.

      Reply
  49. Endrew

    Hi Nelson, good tutorial, work as well in my site. But i have an issue with my category page template in theme builder. I’m using the global header, and the stelys to show a hambuger menu, doesn’t work. Can you help me to resolve this?

    Reply
  50. Ray

    Hi, I am trying to do the following:

    a) show the full navigation on desktop
    b) show a combination of menu elements + hamburger menu for select menu elements
    c) show hamburger menu for mobile

    how can i achieve that? the regular menu + hamburger menu code is still turning all of them into hamburger menu.

    Thanks!

    Reply
    • Hemant Gaba

      Hi Ray,

      I have written the CSS Snippet for you covering all the points that you have provided.

      The Snippet: https://www.codepile.net/pile/mPO6Vj2d

      Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS there to get the results and make sure to read the instructions written with the code. 🙂

      Let me know if that helps.

      Reply
  51. Evan Courtney

    Great tutorial.

    With the hamburger menu on the desktop, my submenu isn’t collapsable like it on mobile.

    Any idea?

    Reply
  52. richa

    Hi, I did exact copy paste of css as mentioned in tutorial.
    (Tried second option of hamburger menu and regular menu side by side on desktop)

    Reply
  53. richa

    Hi, I did exact copy paste of css as mentioned in tutorial.
    (Tried second option of hamburger menu and regular menu side by side on desktop)

    But refer to the syntax errors that I’m facing :

    Unexpected token
    Expected Rbrace

    Reply
    • Hemant Gaba

      Hey Rolf,

      This is strange as the code works on my end. Could you please share the URL of the website for me to investigate further?

      Reply
  54. Augusto

    Hi Nelson,

    Congratulations for your blog!!

    In the products this code does not work for me if in the pages. Could you tell me what code I should add so that it also works in products?

    Thanks!!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Augusto,
      I’m not sure what you mean by products, but sometimes Divi has extra CSS classes for the Theme Builder such as .et .el etc. You would need to provide the link for us to help.

      Reply
  55. Tom

    Hi,

    Thanks for the tip, it’s works fine !

    I have just an issue with the product page and the category page. The hamburger menu doesn’t show. Do you know why ?

    UPDATE: Ok, I found it !

    I add !important and it’s work ! 🙂

    Reply
  56. Zaid

    Hi Nelson/Team

    Thanks for the awesome tutorials. Building on this tutorial, how would I do the following:

    Example website: https://www.momentum.co.za/momentum/home

    1. Align the hamburger menu LEFT on both desktop and mobile?
    2. Design the actual hamburger icon to have a background color and the lines (of the menu icon) to be white?
    3. If possible would you also know how to get that LOGO effect on scroll? (on the example website) As you scroll down the full logo shifts to just the small logo..

    Thanks a mil.

    Reply
  57. Mark Viergutz

    Your solution for this was so much simpler than the convoluted one Elegant Themes provides with jquery (that didn’t work). Thanks.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart