1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved DU regular hamburgur menu even on desktops

Discussion in 'Basic Support Forum' started by Vinayaga Raman, Sep 9, 2019.

  1. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I have added a DU regular to the page and need to have the mobile hamburgur menu show up on the mobile and desktop. How do I do this ?
     
    #1 Vinayaga Raman, Sep 9, 2019
    Last edited: Sep 9, 2019
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    This can be accomplished with our vertical navigation style + no breakpoint:

    First, go to Theme Customizer > Divi Ultimate Header Plugin > Header & Navigation Styling > Choose your custom global header style & choose style 11 or 12.

    Then, go to Theme Customizer > Divi Ultimate Header Plugin > Vertical Navigation > Always hide vertical navigation & show hamburger menu.

    Publish it & done.

    See sample: https://header-demo.diviultimate.com/style-12/
     
    #2 Divi.Help Pro Support, Sep 9, 2019
  3. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks but Is there no way to do this with the other menu styles ? I already have a go ahead from the client for style 9, they will never agree to a vertical navigation.

     
    #3 Vinayaga Raman, Sep 9, 2019
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  4. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    And I'm sure my answer would not have make sense. There are two different menus in the page. The second menu is what has to be hamburger even on desktops.

     
    #4 Vinayaga Raman, Sep 9, 2019
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Basically, vertical navigation style + no breakpoint = hamburger menu + slide in menu. You won't see any vertical navigation stick on your site.

    Let's say now you already has style 9. And you wish to add another hamburger menu.

    1. Go to WP Admin > Divi > DU - Header to edit your custom header style 9.
    2. Then Load layout > Your Saved Layouts > Header & Navigation Style 12 & uncheck 'Replace existing content'.
    3. And remove the header style 12 top bar if you don't need it
    4. Style the hamburger menu bar to suit your taste & save it.
    4. And lastly, set this Theme Customizer > Divi Ultimate > Vertical Navigation > Always hide vertical navigation & show hamburger menu

    Now you have both hamburger & normal menu on your site.

    ==============

    Additional notes on mobile:
    By default, when there's the hamburger menu bar, the default Divi header will be hidden in mobile. To avoid that, you will need to:
    1. Switch to wireframe mode.
    2. Look for the hamburger menu bar section:
    upload_2019-9-9_21-46-45.png

    3. Go to the code module settings & remove the below CSS:

    upload_2019-9-9_21-47-2.png
     
    #5 Divi.Help Pro Support, Sep 9, 2019
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  6. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    This was perfect, Thanks.

    One quick question before you close the ticket though. The DU mobile menu item seems to always force padding space below it and I cant figure out where it comes from. What is the CSS to make this padding below the menu to 0 ?
     
    #6 Vinayaga Raman, Sep 9, 2019
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Not quite sure which part you're referring to. Kindly share your URL.
     
    #7 Divi.Help Pro Support, Sep 9, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  8. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Im speaking of this space below the DU menu on the mobile. There just seems to be no way to get this reduced :-(
     

    Attached Files:

    #8 Vinayaga Raman, Sep 9, 2019
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Kindly share your URL, so that we can provide the right CSS fix.
     
    #9 Divi.Help Pro Support, Sep 10, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  10. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Well, the client was in a hurry, so I switched the menu's to Style 6 and added a html dropdown above it. But I hit a new issue with visibility.

    Please check: https://client.terabytewebsites.com/home/

    I have changed the Zindex for the html menu "Change Region" at the top of the DU main menu, but try what I may, the DU menu always takes higher priority and covers the HTML dropdown menu. You can see the issue in the site.

    upload_2019-9-10_14-53-17.png

    How do I make the dropdown always be on top of the DU menu ?

    Thanks in advance.
     

    Attached Files:

    #10 Vinayaga Raman, Sep 10, 2019
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    The sticky row has z-index of 99996.

    And so you need to go to the Row settings for the html dropdown & set the z-index to be 99997.
     
    #11 Divi.Help Pro Support, Sep 10, 2019
    Vinayaga Raman likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  12. Vinayaga Raman

    Vinayaga Raman New Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Oh my god, I tried all the way to 10001 and gave up thinking its not the right way :)

    All set, you can close the thread now. Thanks so much.

     
    #12 Vinayaga Raman, Sep 10, 2019
(You must log in or sign up to post here.)