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.
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: