How to Create a Fixed Mobile Menu in Divi
We’re back for a short and sweet Divi tutorial! And the topic is fixed mobile header/menus for Divi.
You most likely are well aware that Divi has a fixed navigation menu for desktop. And you also probably know that Divi does not have a fixed menu for tablet and mobile. If you’re a newbie, “fixed” means that the menu sticks to the top of the screen when you scroll so you have easy access to the other pages on the site.
Personally, I think Divi should have a fixed nav menu for mobile by default as well. Let me make my case. So the whole point of a fixed menu on desktop is for the convenience of the user to be able to easily access the menu items without having to scroll back up to the top of the page, right? Well, shouldn’t the same principle apply for mobile too? And actually, the user does a lot more scrolling on mobile, so therefore there should be even more of a reason to have a fixed mobile menu on your Divi website. Think about it— if you have a four column row on desktop, that becomes a much longer set of one column rows because Divi’s responsive grid causes the columns to stack.
That’s my pitch for why the fixed menu on mobile is better for user experience. Did I convince you? Well, let’s actually look at how to do it and you can try it out for yourself.
For the demo, we’ll be taking a look at our very own Divi Life website. Take a look at the iframe below, or if you’re on mobile already, then simply open up the menu at the top.
Okay so let’s make it happen with some CSS. If you’ve never added custom CSS to your Divi website before, it’s very easy. You’ll just copy the code below, and paste it in the custom CSS box that is found in Divi Theme Options.
So the code below is the first step. I’ll cover why a second step is needed in a second.
Part 1 (of 2) Custom CSS - Making the Menu Fixed on Mobile
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed;
}
}Now, if you just add that code above to your website, then likely to work just fine. However, if you have a lot of pages (or subpages) in your menu, then it can get a bit wonky. What happens is when the menu is fixed it stays at the top (duh!). But when you have a lot of pages, and you open up the mobile menu, then a lot of your pages can get cute off below the fold of the website. And since it’s fixed to the top, if you scroll, it will simply scroll the page behind the menu, but keeping you from being able to access the additional menu links.
This is obviously a problem if you have a decent amount of pages in your menu. So I have additional CSS snippet that will fix this problem for us. What it does is it allows the mobile menu area to be able to scroll inside, giving you access to all the menu items even if they extend below the fold. Pretty cool right? And incredible important if you have a Divi website with a decent amount of pages.
You’ll paste this snippet along with the snippet above:
Part 2 (of 2) Custom CSS - Making the Mobile Dropdown Scrollable
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
This is a good one, Tim! Thanks.
Thanks Carey! Glad you liked it. 🙂
Super ! Merci beaucoup !
I know, I know – this is very easy to copy/paste CSS; but why not make this a plugin and charge $10 bucks?
Hi Steve, great point! Thanks for the suggestion. I just created a simple plugin version of the tutorial that adds the CSS for you. But I’ve made it free with a subscribe 🙂
Hi Can you help me please im a newbie and ive installed the plugin which works great in mobile view on a desktop but doesnt on the actual mobile??? could you tell me what im doing wrong please? Thanks , and I agree its defo needed on phones!
Hi Steve,
I checked the URL that you submitted with your comment, and the fixed mobile menu is definitely working on my iPhone 7 Plus. When you checked it initially, it could have been a caching issue. Have you checked it again recently on your mobile device?
Hi Tim
Slightly different subject, sorry im new to all this, im trying to install gt translate in divi and show just the flags in the header is this possible? Thank you
Hi Steve,
I’m not familiar with gt translate, so I’m not the best person to help! But if I were you I’d get help from one of the Divi Facebook groups online. My favorite group is https://www.facebook.com/groups/DiviHelpAndShare/
Hi Tim,
Great tutorial. I learn all the time from your work.
Thx
Ferenc
Thank you, Ferenc, for the awesome feedback! 🙂
Awesome tutorial Tim. I absolutely agree with you regarding the need for a fixed Nav menu on mobile devices. Will be using this on all my sites. Thank you very much.
Thanks, Travis! I’m glad you find it helpful. I use it on all my sites too. 🙂
Hi Tim –Thanks for the great codebit. I’ve added it to a couple sites with success.
I have one site that uses .et_header_style_split— a split navigation with center logo that takes up a bit of vertical real estate. Because of it’s height I would rather the logo not show, but I’m having trouble targeting the .logo_container so I can add display:none;
I’ve quite a few variations, without success, of:
.et_non_fixed_nav.et_transparent_nav .et_header_style_split #main-header .logo_container
Is this something you can help with?
Thank you!
jules
Hi Jules,
I’d be happy to take a look! Can you paste the link here for me to see? Thanks! 🙂
Hi Tim, Thanks for the offer. The site is https://www.frontier-plumbing.com
NOTE: I had to add !important to your first rule: position: fixed for it to work with this configuration.
Hi Jules,
Try adding this underneath the first block of code from the tutorial above. Just make sure it’s still within the media query bracket.
.et_header_style_split header#main-header .logo_container {
display: none;
}
Let me know if that solves it 🙂
Hi Tim
Thanks for helping me pinpoint that element!
I modified the css a bit so that the logo shows initially, but disappears when you scroll down. I also removed the margin from the top of the nav menu to save space. Below is what worked for me
.et_header_style_split header#main-header.et-fixed-header .logo_container {
display: none;
}
.et_header_style_split header#main-header #et_mobile_nav_menu {
margin-top: 0;
}
Thank you so much for you time and solution!
Awesome, thanks for sharing, Jules! I just checked it out on the link you previously shared and it looks great! 🙂
Hi Tim
I made a reply to this with the codebit that worked for me. Did it come through? Do you want me to re-post it?
Sorry about that. I have my comment settings to allow comments to be automatically approved if the comment author has a previously approved comment, but for some reason it’s not working.
Thank you, Tim. This will certainly come in useful.
You’re welcome, Andrej 🙂
Thank you Tim just what I was looking to do! Fantastic!
That’s awesome, Hillary! I’m glad it came at a good time!
Hi Tim, thank you very much for this.
I want to use it for my one-pager. I use a child and I have pasted following code into my Divi child theme: Stylesheet (style.css)…
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed; }}
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
It is not functioning 🙁 However your plugin (tested on localhost) does the job.
I don´t like plugins that much so I just want copy and paste your code. What I’m I doing wrong? Is there some wrong with the code snippet I use? Thanks in advance for your reply 🙂
Hi Tomatito,
Thanks for checking out the tutorial. I apologize it wasn’t working for you. Is it not functioning at all? It could me that your CSS is being cached. Try clearing your cache. Also, if it’s working with the plugin, then maybe just stick with that? I tend to stay from adding extra plugins to my site too, however this plugin is VERY lightweight. The only code is adding the CSS, so it’s not going to slow down your site in any way. Hope that helps!
Hi Tim, for some reason I have missed your reply. Sorry for that.
Everything (mobile fixed menu) is functioning 🙂 But…
My site is an onepager: https://goo.gl/4cdUif
When I click on a menu link it doesn´t scroll to the top of section (I use sections id´s as menulink)
You can check my site to have a closer look.
Do you have a solution (code snippet maybe?) for the problem I have mentioned above?
Thanks in advance for your reply 🙂
Hi Tomatito,
I tested it, and seems to work fine for me. I tested on iPhone 7 Plus, and it was scrolling correctly…
Hi Tim, thanks for your reply. And I´m glad you haven´t noticed the issue I have mentioned.
However it is there… let me explain.
Wrong: https://nl.tinypic.com/r/11izsja/9
Should look like this: https://nl.tinypic.com/r/2enyctg/9
Can you see the difference?
I think the fixed mobile menu is ´stealing´ the top part of the section. As said I use sections as menulinks
Any thoughts about this. Thanks 🙂
Hi Tomatito,
I understand what you’re referring to now. Thanks for showing the screenshots. There’s a few ways you could fix it, but I think the easiest is to add a divider module that only shows up on mobile. You can disable it for tablet and desktop from within the Divi Builder. So that way the divider will give you the extra space needed so the fixed menu doesn’t cover up the actual content. Hope this helps! 🙂
Hi Tim, I have found a ´solution´ for this… but I don´t like it: https://nl.tinypic.com/r/16liq6v/9
I have increased the section height. It is a quick fix… however for scrolling the page it doesn´t look good.
Any thoughts? Thanks in advance :)!
Hi Tim, thanks for your reply. But adding a divider module that only shows up on mobile will do the exact same thing as increasing section height for mobile.
I have tried your solution just in case I my thinking is not clear.
It gives big gaps in between sections when scrolling the page up and down: https://nl.tinypic.com/r/2vio045/9
When using a menulink it looks okay.
What needs to be done in my opinion is…
When scrolling the page up or down default settings of the section (height) and when clicking a menu link an increased height of the section (100px).
Can be done? Or another solution? Thanks in advance 🙂
Try adding !important to your first rule. That worked for me on one of my sites.
position: fixed !important;
Hi Tim,
thanks for this snippet it is really great!
Is here any chance to have fixed mobile menu just for primary, or secondary menu?
The point is that height of both menus on mobile device is a bit large 🙂
Or another solutions for this problem… For example to have lesser height for menus just on mobile devices? Mainly for primary menu I guess…
Anyway, thanks for your good job
Hi Lubo,
Thank you for the kind words. Great question. Yes, you can easily make it fixed just for the top (secondary menu). Just use this:
@media (max-width: 980px) {
.et_fixed_nav #top-header {
position: fixed;
}
}
Hope that helps! 🙂
Hi Tim,
Really appreciated.
You made my website better.
Big Thanks,
That’s so great to hear, Romdee! Thanks for reading, and let me know if you there’s anything in particular you’d like to learn with Divi 🙂
vh is unreliable and not cross-compatible even in 2016.
Have you actually tested this on IE10-11, sometimes Safari and some versions of Android?
They were all problematic last I checked (which was only last month).
Hi Nate,
Yes, I’ve tested with IE 11 and Android and it seems to work just fine 🙂
Tim, i tried the code but didnt work and also tried the plugin, same result. The menu is not scrollable and also puts the pages in a weird hierarchy.
Hi Amanda,
Can you paste a link for me to take a look? I’d be happy to troubleshoot it for you.
Hi Tim. Great CSS!
I was wondering how you can overcome the problem where if you have an anchor link that jumps down the page, the spot where the page should land is partially hidden by the fixed menu. You can see this issue on my site if you click either of the CTA buttons on the home page.
Thanks in advance for any advice.
Hi Michael, I’d recommend adding the anchor link to the row or module, and not the section. Linking to the section tends to land you at the very top of the section, which as you mentioned, is covered when the menu is fixed. So by placing the anchor slightly lower down on in the section, it should fix that.
Thanks for your kind advice Tim. I tried that but it did not change anything. You can see by going to my site https://zeeweb.com on mobile, or in your desktop and then resize to mobile with. Click the button “Or Find Out More.”
I’ve been looking for a solution and have found some javascript that is supposed to fix it, but nothing works.
I just realized that my previous advice is backwards. You should link to an anchor link that is slightly above (not below) the top of the section that you want scrolled to. Let me know if that helps!
Hi Tim
I’m keen to use this for a site I’m currently building, however after both blocks of CSS to the Custom CSS section in Divi Themes when I view my site on my iPhone4 instead of the page loading there appears to be a ‘white block’ exactly were the menu is displayed. When I click on the ‘hamburger’ (mobile menu) the menu items are displayed but any page that gets open still shows the ‘white block’.
If I view the page using the FireFox Developers tool – Responsive Design Mode – everything looks just like your tutorial. I have even looked at the tutorial page on my iPhone 4 and that works better than my page (although I don’t see the scroll bar in the menu).
Any ideas?
https://tonykingcelebrant.com.au/
Hey Tony,
Unfortunately I don’t have an iPhone 4 to test on. I rely on the emulator in Chrome. And like you said was the case for Firefox, I’m not seeing anything wrong in chrome’s responsive tools. You’ve definitely narrowed it down to the custom CSS code from this article? As in, when the code is removed, the problem goes away?
Hi Tim
Thanks for your reply and advice on resolving the issue. I removed the Custom CSS code from this article and had the same result. So I will now track down the problem with the other Custom Code I have for this website.
Thanks for pointing me to the fix.
Cheers
You’re welcome, and good luck! 🙂
Thank you for the tutorial! I discovered the scroll CSS option that I was not aware of and fixed my issue. Thanks for sharing!
You’re very welcome, Frederic! I’m glad it was useful for you 🙂
hi
This is great tutorial thanks a lot
You’re welcome, I’m glad you like it 🙂
Hello Tim,
Great tutorial. But on on site it works, but my background color suddenly is transparant. Could you see whats the problem ? https://stukadoorsbedrijfdeboevere.nl
Thx
This CSS is the problem. I deleted it, and it works.
Perhaps you can see what made the problem?
/****** Menu Full-screen ******/
/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
#main-header .et_mobile_menu li ul.sub-menu.hide {
display: none !important;
visibility: hidden !important;
transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible {
display: block !important;
visibility: visible !important;
}
.et_mobile_menu .menu-item-has-children > a:after {
font-family: “ETmodules”;
font-size: 22px;
font-weight: 800;
content: “3”;
position: absolute;
right: 55px;
}
/* Font Awesome */
.fa {
margin: 10px ;
}
@media screen and (max-width: 980px) {
.et_header_style_centered #main-header {
position: fixed;
}
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(10, 10, 10, 0.8) !important;
margin-left: -30px;
padding: 25% 0;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
text-align: center;
font-size: 1.55em;
border: 0;
padding: 5% 0;
text-transform: uppercase;
letter-spacing: 6px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #0069af;
background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.05em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #999;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;
color: #fff;
}
span.mobile_menu_bar {
z-index: 9999;
}
I’m glad you got it figured out! Where did that CSS come from? Is it custom or part of a premium child theme? I know it’s not part of Divi because of the Font Awesome reference. Wherever it came from though there was a conflict. It looks like that CSS already included making the mobile menu fixed though which is odd.
Thank you Tim! This has been driving me crazy as I have a rather large menu. I found our website from Elegant Theme’s dashboard post. I enjoy all your content and have bookmarked your page.
I want to let you know that your CSS also works on the collapsing nested sub-menus (link below to post), just incase anyone else is wondering. I am now happy with my Divi mobile menu.
https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items
Hi Devin,
Thanks for mentioning that! I’m glad to hear the tutorials are compatible with one another 🙂
Great snippet! Works like a charm. Thanks a lot!
I’m so glad! Thanks for sharing 🙂
Thank you so much! Saved the day for me.
You’re welcome! That’s great to hear! 🙂
How can i fix the search icon in my mobile menù?! :/
Hi Vincent,
What do you mean exactly?
Hi Tim,
I am wondering if you know of a way to hide the fixed navigation till the user starts scrolling on mobile. I have this functionality in the desktop version and it works really well with my fullwidth header.
Andrew
Hi Andrew,
Unfortunately I don’t think there’s an easy way. It would basically require some custom javascript.
Hi Tim, great tutorial thanks so much. I added this to a site and it mostly works, however on Android the logo shifts as I swipe down and covers the menu. I’ve tried everything I can think of to fix that but no luck. Any ideas? Thanks again! Here’s the site in question https://nemanilaw.com/
Hi Brian,
I’ve seen this once before on a Divi site that also used the “centered logo header” option. So honestly, I think it’s some sort of a glitch in Divi…
Hi Tim,
Thank you for this great tutorial. I am trying to make it work on my site. My problem is that I have an image above the menu header. If I ‘fix’ the menu using your code, the menu header loads over the image. Is it possible to load my page as usual (top image then menu header), but when a user scrolls down, the top image scrolls up and once hidden, the menu header sticks? I would love it. Thanks! http://www.DestinationAventure.com
Hi David,
I’m sure there’s a way to do it in Divi, but I haven’t spent the time to figure it out yet. Sorry!
Tim, this is probably the most useful CSS snippet I have ever found for Divi. I tried to achieve it myself once with less than ideal results! Very well done sir!
That’s great to hear, Kurt! I’m glad it worked out 🙂
Is it possible to remove the secondary menu with telephone number and quick email? I’d like to remove it just on mobile/tablet and just when you scroll down… I mean I just don’t want it to be fixed up.
Thanks in advance, ?
Hi Tim,
I just tried your solution and I can’t get it to work. Do you know of any reson why it doesn’t “stick”?
The website is https://paircuichaoimh.ie/
hmmm did you try the plugin version? Some users have reported that the plugin worked when the code didn’t.
Cheers Tim,
I’ll check it out and post the result.
Hey Tim, I tried both the CSS and the plugin, and neither had any effect on my site. Any ideas how to make it work? Thanks.
Got it ironed out Tim. I had the mobile menu customizer plugin running and missed the fact that it had a fixed setting in place that I had not enabled. My fault. Thanks for the great article!
Glad you got it figured out! Thanks for reporting back 🙂
Thank you so much! This works excellent!
That’s great to hear!! 🙂
Had a client ask for this feature and found your code snippets immediately, took seconds to implement and works great. I LOVE the WordPress community for this very reason, the fact that there are so many other brilliant developers and we help each other out. Thanks a bunch for this, Tim!
That’s great to hear! I’m glad you found it at the perfect time 🙂
Hi Tim
I agree, mobile fixed menu must be by default in DIVI, but I think it will be better to be fixed on the bottom.
I’m trying to do it but then the menu keep opening down and, of course, disappears.
I’m kind of lost…
From a couple of years to now smartphons have bigger screens, and it’s against a good UX keep putting the menu on top.
Is easier for the thumbs to clic on the bottom third of the screen, instead of do a difficult moovement to tap menu, phone to call or whatsapp.
I’m on it, but I’m kind of newby coding. I could use some help!
Anyway, thanke for the tut. It’ being really usefull.
Oh, of course, I love overlays (already using it a lot!). Really good job!
Hey Miguel,
Great points! I agree that having a menu fixed to the bottom is better user experience for mobile. Unfortunately it’s not an easy CSS tweak to reverse the direction of the dropdown menu, because it’s controlled by javascript, not just CSS. But I’d like to dig into this deeper and put together a part two to this tutorial for achieving what you’re asking because I think it’s something a lot of Divi users can benefit from. So stay tuned! And I’m glad to hear you’re loving Divi Overlays!! 🙂
Hi Tim
Thanks for answer!
Just FYI, I asked on the Elegant Themes Support about it issue and thy toldme there’s actually a function included in fullwidth menu that make menu goes up instead of down, but it have a bug and it doesn’t work.
THey have it listed in their solving problem list so its possible they improve it in future actualizations.
But a tut (or plugin better!) to fix menu in bottom will be great for any user!!!
Thanks for your time!
Yeah I’ve used the full width menu module with the upward menus, but I believe that’s only for the full width menu module, and not the mobile menu navigation. But yes, I will look into doing a tutorial for achieving this 🙂
Hey Dear it’s not working for Extra Theme please help me to fix header on mobile using extra Theme
Yes this tutorial is only for Divi. Extra has different classes for the main nav, so it won’t work. If you replace the Divi header classes with Extra’s then it should work the same.
Thanks SO much for a quick and easy-to-apply solution! I agree this should become a standard design feature in Divi’s mobile menus – makes no sense at all to have to scroll and scroll and scroll all the way back to the top!
You’re welcome, I’m glad it did what you wanted! 🙂
Thanks Tim. I want the mobile menu to have a transparent background at before scroll but a white background on scroll. How do I do this?
Hey Peter, unfortunately, that would require some JQUERY to achieve so it’s a little more complicated 🙁
Hey Tim!
This is great, had the code already but was Google searching again and stumbled across your site.
Plugin is so much easier and I know you you’ll update so saves me updating.
Had a look around your site – looks great.
Cheers,
Mark (DaPs)
PS: The web link in the form is for my client (first site built for a client using Divi).
Awesome, glad it was helpful Mark! 🙂
Fantastic .. thank you so much, it worked a treat … both parts where needed …
Great! 🙂
Hi there! Any ideas on how I can add a black background to the Divi Mobile Navigation Header? I have the options for desktop, but on mobile, it defaults to a white background. I’ve tried a bunch of CSS, but can’t get it to work on mobile view. Thanks!
Hi Stacey,
You can customize the mobile menu header in WP Admin > Appearance > Customize > Mobile Styles < Mobile Menu > Background Color
IT’s a bit buried and hard to find, but there’s no custom CSS required 🙂
Hi Tim,
Does it work for any website or it has to be running Divi theme?
Thanks.
It will need to be the Divi Theme because each theme has different CSS classes/IDs for the header/menu.
Hey thanks for the help.
When I access the site from a mobile phone the and scroll down the logo jumps off the menu bar. Could you have a look and see where I’ve gone wrong please.
Hey Greg,
Did you get it fixed? I took a look at your site on mobile, and it appears to be working correctly. The logo is where it should be. 🙂
Thanks, works perfectly!
Awesome 🙂
Hello Tim ,
I used your code. Many Thanks.
Unfortunately my logo would have to be hidden when scrolling down.
I can not do it.
Can you help me ?
http://www.cubis-fotobox.de
Greeting
Erik
Hello Tim,
I tried this code:
@media (max-width: 980px) {
.et_fixed_nav #et-top-navigation {
position: fixed;
}
}
Unfortunately without success
Greeting
Erik
Hi Erik,
Maybe add an !important tag like this –> position: fixed !important;
thank you.
do you also have a tutorial for the nice text over image hover effect you have in this video please? 🙂
Yep! Right here: https://divilife.com/animated-image-caption-hover-effects-in-divi/ Enjoy! 🙂
Thank you very much.
You’re welcome!
Thank you so much this is everything i’ve ever wanted in life : ))))))
haha awesome! who knew this tutorial would bring so much joy 🙂
Hmm, I see this when viewing in mobile sizes on desktop, but for some reason it’s not working on my iPhone Xs Max. Is this a known issue?
No it should work for any mobile phone. It doesn’t target the device, just the screen dimensions. So you may need to tweak the CSS to make sure it includes the dimensions of the iPhone XS Max, since it’s a rather large screen.
Hi,
Really happy with this!
I just have one strange thing.
If I check my page on an iPhone using Google Chrome the whole menu works.
If I try it in Safari the last page in the menu (Contact) is not clickable…
That’s very strange. Is it out of view or when you click nothing happens?
Hmm, I can’t get this to work. Wondering if it’s because the main menu is a vertical menu on a desktop. I did delete the Divi builder cache and regular cache.
Never mind! I got it! For vertical menus, it should be:
@media only screen and (max-width: 980px) {
.et_vertical_nav #main-header,
.et_vertical_nav #top-header,
.et_vertical_nav.et_transparent_nav #main-header,
.et_vertical_nav.et_transparent_nav #top-header {
position: fixed;
}
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}
Great, glad you got it to work! Thanks for sharing 🙂
how to set the screen display on the desktop is the same as on mobile with divi.
for example, I open the website using a 5 inch screen size smartphone which looks definitely different from a smartphone with a 6.5 inch size.
does this code only work with your divi theme. it doesn’t stick on my mobile. can you help? i have claue theme by janstudio and use ubermenu on website.
Yes it only works with the Divi theme. Other themes will have different CSS classes for the header. Also Ubermenu will also have some unique CSS classes. I recommend reaching out to Ubermenu support and possibly your theme developer. As a sidenote, I highly recommend switching to the Divi theme 🙂
This is great!
Thank you so much for doing this.
You’re welcome!
Thank you so, so much! Made my day 🙂
You’re welcome!! 🙂
Thank you so much. Its perfectly worked on my client sites.
Great!! 🙂
Hey buddy this did not work for my Divi site. I also have no plugins besides Divi plugins so I know there are no conflicts. I seen it worked for so may others. Just not my website for some reason?
I figured it out:
@media (max-width: 980px) {
.et_vertical_nav.et_transparent_nav #main-header, .et_vertical_nav.et_transparent_nav #main-header, .et_vertical_nav #main-header, .et_vertical_nav #main-header {
position: fixed;
}
#logo {
max-height: 50%;
}
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}
Oh okay great!!
Hmm that’s very weird. Just to double check, you places the class and ID in the correct spots? And what method did you use, 1 or 2?
Thx, is very helpful.
I try to Divi 4.0…but not working
BR
Halim Ivan
Glad it was helpful. If 4.0 isn’t working for you though then I recommend opening a support chat with Elegant Themes.
Dude, you rock this is great (and working fine for me in Divi 4.0). Thanks so much!
You’re welcome! Glad it’s working for you 🙂
Man, you just saved my day. Awesome post. Thank you so much
You’re welcome! 🙂
Is it possible to make this Mobile version display on all desktops also, except homepage?
Nice tutor, thanks buddy.
I couldn’t get the css or the plugin to work for my site (www.taylorconsultingpartners.com). Please help
you are a life saver. EXACTLY what I needed and I am glad you included that second snippet in too because I needed that..TOO!!
Thank you so much!
You’re welcome! 🙂
does this code only work with your divi theme. it doesn’t stick on my mobile. can you help? i have claue theme by janstudio and use ubermenu on website
Divi only, sorry
Great tutorial, website problem solved, thank you very much
Hi !
Can you change the background color of the sticky mobile menu? Right now it is transparent on mobile, whereas on my desktop it has a white background. Would love to make it white on Mobile too!
Any chance that could work?