Show Secondary Menu Items in Secondary Menu on Mobiles

This post may contain referral links which may earn a commission for this site

I've previously written about how the links from a menu shown in Divi'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 (max-width: 980px) {
	#top-header, div#et-secondary-menu, ul#et-secondary-nav {
		display: block !important; 
	}
	#top-header .container {
		padding-top: 0.75em !important;
	}
}

Hundreds of new features for Divi
in one easy-to-use plugin

19 Comments

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

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

    Reply
    • You're very welcome, Matthew!

      Reply
  3. 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
  4. It works, was just caché. Thank you!

    Reply
  5. 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
  6. Works great! Thanks.

    Reply
  7. 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
  8. 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

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