Show Secondary Menu Items in Secondary Menu on Mobiles

Written by Dan Mossop

I've previously written about how the links from a menu shown in the Divi theme's secondary header get moved to the mobile drop-down menu, and how to hide them if you don't want that behavior. But what if you want the secondary menu items to keep displaying in their original location, in the secondary header?

You can force the menu items to remain visible in the secondary header on mobiles using this CSS:

@media screen and (max-width: 980px) {
	#page-container {
		padding-top: 0px !important;
	}
	#top-header {
		position: static !important;
		display: block !important;
	}
	#top-header .container {
		padding-top: 0.75em !important;
	}
	#page-container #main-header {
		position: relative !important;
		top: 0 !important;
	}
	#top-header #et-secondary-menu,
	#top-header #et-secondary-nav {
		display: block !important;
	}
	#top-header #et-secondary-nav li {
		text-align: center !important;
	}
	#et-main-area {
		padding-top: 1px;
	}
}

Thanks to Ryan for his feedback / improvements to the code.

Enhance Your Divi Site's Flexibility

Transform your WordPress site with WP Magic CTAs. Our AI-driven plugin creates customized, highly-targeted call-to-actions for each post, helping you increase engagement and conversions effortlessly. Perfect for promoting offers, growing your email list, and directing traffic where you need it most.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

26 Comments

  1. This was removing the main nav for me but this keeps both;

    @media screen and (max-width: 980px) {
    #page-container {
    padding-top: 0px!important;
    }
    #top-header {
    position: static!important;
    display: block!important;
    padding-top: 6px;
    }
    #main-header {
    position: static!important;
    }
    #top-header #et-secondary-menu,
    #top-header #et-secondary-nav {
    display: block!important;
    }
    #top-header #et-secondary-nav li {
    text-align: center!important;
    }

    }

    Reply
    • Hey Ryan, thanks for pointing out the issue and sharing your solution. I've incorporated your code into the post, along with a few enhancements to address a couple of issues / edge cases. It seems to be working well for me, but let me know if you notice anything amiss. Thanks again!

      Reply
  2. @media screen and (max-width: 980px) {
    #top-header, #main-header {position: static!important;}
    #top-header {display: block!important;}
    }

    Reply
  3. Just want to say THANK YOU!!! This worked perfectly!

    Reply
    • You're very welcome, Leah! I'm glad it helped :)

      Reply
  4. You are such a superstar; every bit of css you offer works! Often I Google and find numerous supposed 'fixes' but they don't. I have Divi Booster, but it only allows showing social icons on mobile, not the secondary menu too. Perhaps you could add that in your next update?

    Reply
    • Hey Liz! I wish it was indeed the case that every bit of CSS I offer works ;) That's certainly not the case, but I'm glad the ones you've used have worked out! Just to be clear, you're asking for an option in Divi Booster to apply the code in this post, is that right? I've added this to my feature list and will hopefully be able to add it in a future update. Thanks!

      Reply
  5. Hi, It's possible to use hamburger menu on desktop and show secondary menu? Thanks!

    Reply
  6. Thank you! This should not be required, but is greatly appreciated.

    Reply
    • You're very welcome, Matthew!

      Reply
  7. Hello, I attempted to us the code snippet above and it worked, other than it layyed the secondary menu over the main menu, instead of above it.
    This could be due to other css customization I have already on my site.
    Any suggestions to ensure the main menu is placed below the secondary menu using this method would be appreciated.

    Reply
    • Hi Steven,

      I'll need to revisit this code when I get a chance to figure out why this is happening / whether something has changed in Divi to cause it. In the meantime, this CSS might help you:

      #main-header { margin-top: 40px !important; }
      

      It moves the main header down by 40px so that it is no longer under your secondary header. It's not ideal as it would need to be updated if you change the height of your secondary header. Also, the page content isn't moved down with it so some of the content will be covered by the adjusted header, but given the layout of your site, I don't think this will be particularly noticeable.

      Reply
      • Hi sir, i had a secondary menu on the top of the page, which was showing on the pc but not on mobile phone. I added the css

        @media (max-width: 980px) { #top-header, div#et-secondary-menu, ul#et-secondary-nav { display: block !important; } #top-header .container { padding-top: 0.75em !important; } }

        Which worked. Thank you very much for that but i got some space between this menu and the lower page now but it happens only on mobile phones. Can you please give it a look and help me out?
        Stylezmix.com
        Plus is it possible to show the cart icon next to the menu instead of underneath the menu? It will be very very helpful. Thank you alot.

        Reply
        • Hi Abbas, I'm not sure if you've made some changes, but I don't currently see the secondary menu on mobile… However, I do see quite a large gap on mobile between the main header (e.g. the logo) and the page content, on most pages except the homepage. If this is what you're trying to reduce, you should be able to fix it with:

          @media only screen and (max-width: 981px) {
              #main-content > .container {
                  padding-top: 0px !important;
              }  
          }
          

          Regarding the cart icon – it looks like you currently have in the top header (and hence it is hidden on mobile). Are you wanting it to show up in the main menu (e.g. next to the hamburger menu / search icon), or somewhere else? Thanks!

          Reply
  8. It works, was just caché. Thank you!

    Reply
  9. Hi, it works if I make my pc window smaller, but not if I display de page in mobile or tablet. Do you have any solution please? Thanks in advanced.

    Reply
  10. Works great! Thanks.

    Reply
  11. in my case it is not working. Any alternative for this css???

    Reply
    • Hi swostipriya, I've just updated the code so that it should work better with the latest version of Divi. Perhaps you can give it a to? If it still doesn't work, any chance you are able to give me a link to the site you're working on so that I can take a look? Cheers!

      Reply
  12. It works fine! I have been looking for a solution because on mobile, the cart was not showing and with this code, it is perfect. Thank you so much!

    Reply
    • this did not work for me… secondary menu still does not display on mobile

      Reply
      • Hey Luke, I've just updated the code which should make it work better with the latest of Divi – it forces the secondary header to show if it is not visible on mobiles. I think that should get it working for you, but let me know if not. Thanks!

        Reply
        • Sweet. It work's perfectly now. Thank you soooo much. Exactly what I was failing to do on my own without your gracious assistance.

          Reply
          • Hi
            I cannot get this to work . Applied this morning

          • Hi Kylie, I just took a look at your site and it's working how I'd expect – the phone number and email address show in the top menu on mobiles. Hopefully you're seeing the same thing. If not, I'd suggest clearing your browser cache and any site caches to ensure that you're seeing the latest version of the page. Let me know though, if it still isn't behaving the way you expect.

            Also, a couple of suggestions that might help you out… First, on mobiles the elements are a bit closer to the top of the page than they are on the desktop. Increasing the padding-top (in the code above) to 0.85em should sort this out. Second, if you don't want the items to show up in the drop-down menu, combine the above with the instructions in this post: https://divibooster.com/hide-secondary-menu-items-in-mobile-menu/

            I hope that helps!

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.