How to Create a Fixed Mobile Menu in Divi

by | Oct 5, 2016 | Divi Tutorials | 79 comments

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.

Want the free plugin version of this tutorial so you don’t have to mess with the code? Subscribe to get the free plugin sent to you right away!

Click Here

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:

Alright we’re done! Pretty straight forward right? It’s a simple CSS tweak, but one that is incredibly important in my opinion for creating the best user experience possible on mobile. If you have any questions, please let me know in the comments! And/Or, if you have any requests for future tutorials, let me know below as well!

79 Comments

  1. Carey

    This is a good one, Tim! Thanks.

    Reply
    • Tim Strifler

      Thanks Carey! Glad you liked it. 🙂

      Reply
  2. Steve

    I know, I know – this is very easy to copy/paste CSS; but why not make this a plugin and charge $10 bucks?

    Reply
    • Tim Strifler

      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 🙂

      Reply
      • steve

        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!

        Reply
        • Tim Strifler

          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?

          Reply
      • steve

        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

        Reply
  3. Ferenc

    Hi Tim,

    Great tutorial. I learn all the time from your work.

    Thx
    Ferenc

    Reply
    • Tim Strifler

      Thank you, Ferenc, for the awesome feedback! 🙂

      Reply
  4. Travis

    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.

    Reply
    • Tim Strifler

      Thanks, Travis! I’m glad you find it helpful. I use it on all my sites too. 🙂

      Reply
  5. JulesWebb

    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

    Reply
    • Tim Strifler

      Hi Jules,

      I’d be happy to take a look! Can you paste the link here for me to see? Thanks! 🙂

      Reply
        • Tim Strifler

          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 🙂

          Reply
          • Jules Webb

            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!

          • Tim Strifler

            Awesome, thanks for sharing, Jules! I just checked it out on the link you previously shared and it looks great! 🙂

        • Jules Webb

          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?

          Reply
          • Tim Strifler

            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.

  6. Andrej

    Thank you, Tim. This will certainly come in useful.

    Reply
  7. Hillary

    Thank you Tim just what I was looking to do! Fantastic!

    Reply
    • Tim Strifler

      That’s awesome, Hillary! I’m glad it came at a good time!

      Reply
  8. Tomatito

    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 🙂

    Reply
    • Tim Strifler

      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!

      Reply
      • Tomatito

        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 🙂

        Reply
        • Tim Strifler

          Hi Tomatito,

          I tested it, and seems to work fine for me. I tested on iPhone 7 Plus, and it was scrolling correctly…

          Reply
          • Tomatito

            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: http://nl.tinypic.com/r/11izsja/9

            Should look like this: http://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 🙂

          • Tim Strifler

            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! 🙂

          • Tomatito

            Hi Tim, I have found a ´solution´ for this… but I don´t like it: http://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 :)!

          • Tomatito

            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: http://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 🙂

    • Jules

      Try adding !important to your first rule. That worked for me on one of my sites.

      position: fixed !important;

      Reply
  9. Lubo

    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

    Reply
    • Tim Strifler

      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! 🙂

      Reply
  10. Romdee

    Hi Tim,

    Really appreciated.
    You made my website better.

    Big Thanks,

    Reply
    • Tim Strifler

      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 🙂

      Reply
  11. Nate

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

    Reply
    • Tim Strifler

      Hi Nate,

      Yes, I’ve tested with IE 11 and Android and it seems to work just fine 🙂

      Reply
  12. Amanda Lucas

    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.

    Reply
    • Tim Strifler

      Hi Amanda,

      Can you paste a link for me to take a look? I’d be happy to troubleshoot it for you.

      Reply
  13. Michael S. Rosekrans

    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.

    Reply
    • Tim Strifler

      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.

      Reply
      • Michael S. Rosekrans

        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.

        Reply
        • Tim Strifler

          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!

          Reply
  14. Tony

    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?

    http://tonykingcelebrant.com.au/

    Reply
    • Tim Strifler

      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?

      Reply
      • Tony

        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

        Reply
        • Tim Strifler

          You’re welcome, and good luck! 🙂

          Reply
  15. Frederic

    Thank you for the tutorial! I discovered the scroll CSS option that I was not aware of and fixed my issue. Thanks for sharing!

    Reply
    • Tim Strifler

      You’re very welcome, Frederic! I’m glad it was useful for you 🙂

      Reply
  16. vicky

    hi
    This is great tutorial thanks a lot

    Reply
    • Tim Strifler

      You’re welcome, I’m glad you like it 🙂

      Reply
    • Dennis

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

      Reply
      • Tim Strifler

        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.

        Reply
  17. Devin Hyden

    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

    Reply
    • Tim Strifler

      Hi Devin,

      Thanks for mentioning that! I’m glad to hear the tutorials are compatible with one another 🙂

      Reply
  18. Magnus

    Great snippet! Works like a charm. Thanks a lot!

    Reply
    • Tim Strifler

      I’m so glad! Thanks for sharing 🙂

      Reply
  19. Human

    Thank you so much! Saved the day for me.

    Reply
    • Tim Strifler

      You’re welcome! That’s great to hear! 🙂

      Reply
  20. Vincenz

    How can i fix the search icon in my mobile menù?! :/

    Reply
    • Tim Strifler

      Hi Vincent,

      What do you mean exactly?

      Reply
  21. Andrew

    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

    Reply
    • Tim Strifler

      Hi Andrew,

      Unfortunately I don’t think there’s an easy way. It would basically require some custom javascript.

      Reply
  22. Brian Rugg

    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 http://nemanilaw.com/

    Reply
    • Tim Strifler

      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…

      Reply
  23. David

    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

    Reply
    • Tim Strifler

      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!

      Reply
  24. Kurt

    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!

    Reply
    • Tim Strifler

      That’s great to hear, Kurt! I’m glad it worked out 🙂

      Reply
  25. Massimo

    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, ?

    Reply
  26. Donal

    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 http://paircuichaoimh.ie/

    Reply
    • Tim Strifler

      hmmm did you try the plugin version? Some users have reported that the plugin worked when the code didn’t.

      Reply
      • Donal

        Cheers Tim,

        I’ll check it out and post the result.

        Reply
  27. Kurt

    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.

    Reply
    • Kurt

      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!

      Reply
      • Tim Strifler

        Glad you got it figured out! Thanks for reporting back 🙂

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Divi Fixed Mobile Menu plugin

Get the plugin version of this tutorial sent to you for free to use on all of your Divi websites!

Pin It on Pinterest

Share This

We're creating more tutorials!

Subscribe and we'll notify you when we publish more tutorials and blog posts similar to this. :)

 

We protect your email & never spam.

You have Successfully Subscribed!