How to Create a Fixed Mobile Menu in Divi

by | Oct 5, 2016 | Divi Tutorials | 143 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!

143 Comments

  1. Avatar

    This is a good one, Tim! Thanks.

    Reply
    • Avatar

      Thanks Carey! Glad you liked it. πŸ™‚

      Reply
    • Avatar

      Super ! Merci beaucoup !

      Reply
  2. Avatar

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

    Reply
    • Avatar

      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
      • Avatar

        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
        • Avatar

          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
      • Avatar

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

    Hi Tim,

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

    Thx
    Ferenc

    Reply
    • Avatar

      Thank you, Ferenc, for the awesome feedback! πŸ™‚

      Reply
  4. Avatar

    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
    • Avatar

      Thanks, Travis! I’m glad you find it helpful. I use it on all my sites too. πŸ™‚

      Reply
  5. Avatar

    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
    • Avatar

      Hi Jules,

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

      Reply
        • Avatar

          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
          • Avatar

            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!

          • Avatar

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

        • Avatar

          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
          • Avatar

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

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

    Reply
    • Avatar

      You’re welcome, Andrej πŸ™‚

      Reply
  7. Avatar

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

    Reply
    • Avatar

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

      Reply
  8. Avatar

    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
    • Avatar

      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
      • Avatar

        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
        • Avatar

          Hi Tomatito,

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

          Reply
          • Avatar

            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 πŸ™‚

          • Avatar

            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! πŸ™‚

          • Avatar

            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 :)!

          • Avatar

            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 πŸ™‚

    • Avatar

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

      position: fixed !important;

      Reply
  9. Avatar

    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
    • Avatar

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

    Hi Tim,

    Really appreciated.
    You made my website better.

    Big Thanks,

    Reply
    • Avatar

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

    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
    • Avatar

      Hi Nate,

      Yes, I’ve tested with IE 11 and Android and it seems to work just fine πŸ™‚

      Reply
  12. Avatar

    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
    • Avatar

      Hi Amanda,

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

      Reply
  13. Avatar

    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
    • Avatar

      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
      • Avatar

        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
        • Avatar

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

    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/

    Reply
    • Avatar

      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
      • Avatar

        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
        • Avatar

          You’re welcome, and good luck! πŸ™‚

          Reply
  15. Avatar

    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
    • Avatar

      You’re very welcome, Frederic! I’m glad it was useful for you πŸ™‚

      Reply
  16. Avatar

    hi
    This is great tutorial thanks a lot

    Reply
    • Avatar

      You’re welcome, I’m glad you like it πŸ™‚

      Reply
    • Avatar

      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
      • Avatar

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

    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
    • Avatar

      Hi Devin,

      Thanks for mentioning that! I’m glad to hear the tutorials are compatible with one another πŸ™‚

      Reply
  18. Avatar

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

    Reply
    • Avatar

      I’m so glad! Thanks for sharing πŸ™‚

      Reply
  19. Avatar

    Thank you so much! Saved the day for me.

    Reply
    • Avatar

      You’re welcome! That’s great to hear! πŸ™‚

      Reply
  20. Avatar

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

    Reply
    • Avatar

      Hi Vincent,

      What do you mean exactly?

      Reply
  21. Avatar

    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
    • Avatar

      Hi Andrew,

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

      Reply
  22. Avatar

    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/

    Reply
    • Avatar

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

    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
    • Avatar

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

    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
    • Avatar

      That’s great to hear, Kurt! I’m glad it worked out πŸ™‚

      Reply
  25. Avatar

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

    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/

    Reply
    • Avatar

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

      Reply
      • Avatar

        Cheers Tim,

        I’ll check it out and post the result.

        Reply
  27. Avatar

    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
    • Avatar

      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
      • Avatar

        Glad you got it figured out! Thanks for reporting back πŸ™‚

        Reply
  28. Avatar

    Thank you so much! This works excellent!

    Reply
    • Avatar

      That’s great to hear!! πŸ™‚

      Reply
  29. Avatar

    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!

    Reply
    • Avatar

      That’s great to hear! I’m glad you found it at the perfect time πŸ™‚

      Reply
  30. Avatar

    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!

    Reply
    • Avatar

      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!! πŸ™‚

      Reply
      • Avatar

        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!

        Reply
        • Avatar

          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 πŸ™‚

          Reply
  31. Avatar

    Hey Dear it’s not working for Extra Theme please help me to fix header on mobile using extra Theme

    Reply
    • Avatar

      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.

      Reply
  32. Avatar

    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!

    Reply
    • Avatar

      You’re welcome, I’m glad it did what you wanted! πŸ™‚

      Reply
  33. Avatar

    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?

    Reply
    • Avatar

      Hey Peter, unfortunately, that would require some JQUERY to achieve so it’s a little more complicated πŸ™

      Reply
  34. Avatar

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

    Reply
    • Avatar

      Awesome, glad it was helpful Mark! πŸ™‚

      Reply
  35. Avatar

    Fantastic .. thank you so much, it worked a treat … both parts where needed …

    Reply
  36. Avatar

    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!

    Reply
    • Avatar

      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 πŸ™‚

      Reply
  37. Avatar

    Hi Tim,

    Does it work for any website or it has to be running Divi theme?
    Thanks.

    Reply
    • Avatar

      It will need to be the Divi Theme because each theme has different CSS classes/IDs for the header/menu.

      Reply
  38. Avatar

    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.

    Reply
    • Avatar

      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. πŸ™‚

      Reply
  39. Avatar

    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

    Reply
  40. Avatar

    Hello Tim,

    I tried this code:

    @media (max-width: 980px) {
    .et_fixed_nav #et-top-navigation {
    position: fixed;
    }
    }

    Unfortunately without success

    Greeting
    Erik

    Reply
    • Avatar

      Hi Erik,

      Maybe add an !important tag like this –> position: fixed !important;

      Reply
  41. Avatar

    thank you.
    do you also have a tutorial for the nice text over image hover effect you have in this video please? πŸ™‚

    Reply
  42. Avatar

    Thank you very much.

    Reply
  43. Avatar

    Thank you so much this is everything i’ve ever wanted in life : ))))))

    Reply
    • Avatar

      haha awesome! who knew this tutorial would bring so much joy πŸ™‚

      Reply
  44. Avatar

    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?

    Reply
    • Avatar

      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.

      Reply
  45. Avatar

    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…

    Reply
    • Avatar

      That’s very strange. Is it out of view or when you click nothing happens?

      Reply
  46. Avatar

    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.

    Reply
  47. Avatar

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

    Reply
    • Avatar

      Great, glad you got it to work! Thanks for sharing πŸ™‚

      Reply
  48. Avatar

    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.

    Reply
  49. Avatar

    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.

    Reply
    • Avatar

      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 πŸ™‚

      Reply
  50. Avatar

    Thank you so much for doing this.

    Reply
  51. Avatar

    Thank you so, so much! Made my day πŸ™‚

    Reply
  52. Avatar

    Thank you so much. Its perfectly worked on my client sites.

    Reply
  53. Avatar

    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?

    Reply
    • Avatar

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

      Reply
    • Avatar

      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?

      Reply
  54. Avatar

    Thx, is very helpful.

    I try to Divi 4.0…but not working

    BR

    Halim Ivan

    Reply
    • Avatar

      Glad it was helpful. If 4.0 isn’t working for you though then I recommend opening a support chat with Elegant Themes.

      Reply
  55. Avatar

    Dude, you rock this is great (and working fine for me in Divi 4.0). Thanks so much!

    Reply
    • Avatar

      You’re welcome! Glad it’s working for you πŸ™‚

      Reply
  56. Avatar

    Man, you just saved my day. Awesome post. Thank you so much

    Reply
  57. Avatar

    Is it possible to make this Mobile version display on all desktops also, except homepage?

    Reply

Submit a Comment

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

[et_bloom_inline optin_id="optin_1"]

Pin It on Pinterest

Share This