1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi.Help Pro One-Page Layouts - Beautifully crafted Divi layouts for you to kick start Divi sites.
View All Pro One-Page Layouts
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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

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 Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    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 Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  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 Blog Plugin - Easily set awesome default design for your Divi single blog page: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 Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  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:
    Log In or Sign Up to view this code.
     
  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 Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  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 Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  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:
    Log In or Sign Up to view this code.
    Let me know if it works.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  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:
    Log In or Sign Up to view this code.
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  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 Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More