Showing only mobile menu on desktop and mobile?

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.

 

Thanks!

Got me part of the way there. The site is https://www.hubfares.com/newsite/

Here's what it looks like after that css is applied

 

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%;}

 

Just wish I could get the DUH header showing instead of the default DIVI mobile header

 

Thanks, take a look at the site now. Both menu bars are showing with this css.

 

Yes! Played with the CSS for a couple of hours and couldn't replicate that

 

P.S. If you could share that CSS, I would greatly appreciate it!

 

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?

 

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.