1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Showing only mobile menu on desktop and mobile?

Discussion in 'Basic Support Forum' started by Eric Caldwell, Feb 18, 2019.

  1. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I've searched the forums and Google and can't quite figure this one out. Is there a way using the DUH plugin to always show the hamburger menu and have it be left aligned? I just had a customer request that feature today.

    They are looking for something like this one: https://www.babylon-booking.com

    With the DIVI header, some custom CSS did the trick but, that same CSS doesn't seem to jive well witht DUH plugin.
     
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    @media screen and (min-width: 981px) {
        #main-header {
            position: relative!important;
        }
    }
    #main-header {
        display: block!important;
    }
    #top-menu-nav {
        display: none!important;
    }
    #et_mobile_nav_menu {
        display: block!important;
    }
    #et-top-navigation {
        float: left!important;
    }
    It will show the mobile menu + logo at the top.
     
  3. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    From my side, it doesn't overlap though. See screenshot below:

    upload_2019-2-19_15-43-43.png
     
  5. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I hacked at it some more and came up with below. The downside is this forces the default DIVI mobile header it seems.

    @media screen and (min-width: 981px) {
    #main-header {
    position: relative!important;
    }
    }
    #main-header {
    display: block!important;
    position: fixed !important;
    }
    .free-du-plugin-header {display: none;}
    #top-menu-nav {
    display: none!important;
    }
    #et_mobile_nav_menu {
    display: block!important;
    }
    #et-top-navigation {
    float: left!important;
    }

    .container.et_menu_container { width: 95%;
    margin-left: 1%;}
    .et_fixed_nav #et-top-navigation { padding-left: 15%;}
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Any specific issue that you're still having?
     
  7. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Just wish I could get the DUH header showing instead of the default DIVI mobile header :(
     
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    This is because you added this: .free-du-plugin-header {display: none;}

    You will need to remove that.

    And I see that you wish to make the Divi mobile menu sticky. So, have a try on the below CSS instead:
    Code:
    @media screen and (min-width: 981px) {
        .free-du-plugin-header {
                margin-top: 89px!important;
        }
    }
    #main-header {
        display: block!important;
    }
    #top-menu-nav {
        display: none!important;
    }
    #et_mobile_nav_menu {
        display: block!important;
    }
    #et-top-navigation {
        float: left!important;
    }
     
  9. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks, take a look at the site now. Both menu bars are showing with this css.
     
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Maybe I misunderstood what you're saying. Are you looking to make it like this:

    upload_2019-2-19_23-12-2.png
     
  11. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Yes! Played with the CSS for a couple of hours and couldn't replicate that :)
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  12. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    P.S. If you could share that CSS, I would greatly appreciate it!
     
  13. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Just roughly make a mockup for that just now.

    Below are the steps on how to create it.
    1. First, remove the previous CSS.
    2. Use Header Style 10 instead. Choose it in Theme Customizer.
    3. Edit the Header Style 10 in Divi Library. Remove the top bar, as you don't need it.
    4. Go to the Menu module settings > Advanced > CSS Class & add free-menu-mobile
    5. Paste the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .free-menu-mobile .fullwidth-menu-nav {
        display: none!important;
    }
    .free-menu-mobile .et_mobile_nav_menu {
        float: left;
        display: block!important;
    }
    .free-menu-mobile .mobile_menu_bar:before {
        top: 26px!important;
    }
    #free-sticky-wrapper, .free-sticky {
        display: block!important;
    }
    #main-header {
        display: none!important;
    }
    #page-container {
        padding-top: 0!important;
    }
    Let me know if it works.
     
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  14. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Almost there! When you resize the screen for mobile, the mobile menu isn't showing now is all.

    Seems like we need an @media query to show the main nav again?
     
  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see that you added code to show the mobile menu. You don't have to do that. You can completely hide the default Divi mobile menu & use the DU Header one.

    Try the below CSS instead.
    Code:
    .free-menu-mobile .fullwidth-menu-nav {
        display: none!important;
    }
    .free-menu-mobile .et_mobile_nav_menu {
        float: left;
        display: block!important;
    }
    .free-menu-mobile .mobile_menu_bar:before {
        top: 26px!important;
    }
    #free-sticky-wrapper, #page-container .free-sticky {
        display: block!important;
    }
    #main-header {
        display: none!important;
    }
    #page-container {
        padding-top: 0!important;
    }
    @media screen and (max-width: 980px) {
        #page-container .free-sticky {
               position: relative!important;
        }
       #page-container {
               margin-top: -1px!important;
       }
    }
    
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  16. Eric Caldwell

    Eric Caldwell New Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Made some final tweaks for colors, width, etc. Couldn't have done it without your help! Question, if the customer still wants customizations, do you offer paid work for creating .json files or other we could use to meet their requirement. This project has been a moving target so we're putting the kabash on some things without them funding more work.
     
  17. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Sorry to say that we don't offer paid work.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo