fbpx

Web design made easy.

Design + Tech Tips for WordPress and Divi.

How to hide the menu bars on a single page in Divi

by Mar 17, 2018Code Snippets

I love me some Divi. Truly. It’s the best website platform I’ve ever encountered, and I have used ’em all.

And in many ways Divi is perfect for building native landing pages, opt-in pages, and sales pages that are on brand. They’re hosted on your own website. It’s easy to update.

They integrate with your email service provider, and there’s no need for a third-party platform. But… The menus are always there, and menus are a problem on landing pages.

You see, you don’t want people to have the option to go anywhere else on your site. They should get to opt -in or leave. But in the default Divi Theme Options, this isn’t available to you.

And things like, “hide nav before scroll” don’t do the trick because, as soon as someone scrolls, the navigation appears. (No matter how beautifully you design the page to fit in the viewport, someone, somewhere, will have to scroll.)

You can use the Blank Page template under the page settings, but this removes the footer as well, which you may still need for things like your copyright, privacy policy, and terms of service links.

Luckily, you don’t have to suffer any longer. With this bit of code you can hide the menus on only the page you use this code on.

Before using this code: Note the menus. After using this code. Viola! No menus!

How to install this code:

Navigate to the page you want to hide menus on inside your WordPress website. In the Divi builder click the hamburger icon on the purple toolbar. Then paste the code below in the box that says “Custom CSS.” /* Hide the header */
#secondary-menu { display:none; }
#main-header { display:none; }
#page-container { padding-top:0px !important; margin-top:-1px !important }
#top-header { display: none; }

/* Adjust padding for transparent headers */
.et_transparent_nav
#main-content .container { padding-top: 58px !important; }

Update October 30th 2019:

If you want to hide the footer, you can use the Blank Page template, or use this code. To hide the footer use:

#main-footer { display: none; }

Beware, however, this will remove your footer credits, your copyright info, and links to your privacy policy and terms of service.

74 Comments

  1. Kimberley Hong

    THANK YOU

    Reply
    • Ysmay

      You’re welcome!

      Reply
  2. susan@vawwonline

    This solution worked perfectly on the first try. Thank so much for your help!

    Reply
    • Ysmay

      Yay! So glad to hear that! πŸ˜€ That’s what I aim for!

      Reply
  3. Peter

    Hi, Thank for help with problem of hiding menu bar πŸ™‚ But… πŸ™‚ Can You help me – I need hide only second menu bar. Is it possible? – I donΒ΄t wokr with code πŸ™‚
    Thank You

    Reply
  4. Manley

    This is fantastic, but still leave the primary navigation in the footer…. which ironically is perfect for the page I created (it’s not a landing page) but what to do for getting rid of footer navigation for landing pages, and/or do you care?
    Added the page for you to see.

    Reply
    • Ysmay

      Yeah, the footer is different code.

      To hide the footer use:

      #main-footer {
      display: none;
      }

      Reply
  5. Elena

    Thank you, thank you, thank you!!! Now I do not have to go to leadpages to create a menu-less page!!!

    Reply
    • Ysmay

      YES! This totally saves money. With just a little tweaking, Divi can create landing pages, no landing page platforms needed. πŸ™‚

      Reply
  6. Brandi

    thank you this worked perfect!!

    Reply
  7. Amber

    This worked perfectly, thank you!

    Reply
  8. Khaled

    Another easier way to do what you’re trying to do is just to select the option to have a blank page template. There is “default template” and “blank page”. I guess you would want the “blank page” option to remove all menus.

    What Im currently trying to figure out is how to keep the secondary menu bar (phone number and email) and not have the primary menu bar. Might play with your code to figure it out.

    Thanks for sharing this!

    Reply
    • Ysmay

      Yes, a blank page is definitely an option, but I have noticed in some sites it doesn’t always work perfectly for whatever reason. Sometimes it still leaves the secondary menu or the footer.

      I am intrigued by your idea to have the secondary menu bar only.

      Reply
  9. Mike

    Thanks for posting this. Very helpful!

    Reply
  10. kpelchat65

    Awesome bit of code. Thank you!

    Reply
    • Ysmay

      My pleasure!

      Reply
  11. nk1090

    This worked great! Thanks πŸ™‚

    Reply
  12. Joan Mia

    wow, thank you, this is what i am looking for my landing page

    Reply
  13. Ian Rayner

    Thanks for this – now I am guessing I can use this as a template to suppress the footer too!
    #main-footer{display: none;} Not sure if I need to make an padding / margin adjustments, but it seems to work.
    Thank you!

    Reply
    • Ysmay

      Yep, exactly! Padding will depend on your particular design.

      Reply
  14. karynpaige

    This is exactly what I’ve been looking for. Thanks for sharing!

    Reply
  15. Tony Langford

    Nice, thanks. Have you passed this onto the Divi team so they can implement it in a future release?

    Reply
    • Ysmay

      No, but I should! Thanks for the suggestion!

      Reply
  16. Lois Reed

    This leaves A LOT of space at the top. A simple way is to change the Template from “default” to “blank” and then load your first module and change padding-top and margin-top to 0 (zero)

    Reply
    • Ysmay

      I haven’t noticed the space issue? Wonder what would’ve caused that.

      Reply
  17. Em

    Brilliant! Worked like a charm!

    Reply
  18. Richard

    Thanks, but problem is that it hides the logo too

    Reply
    • Ysmay

      Yes, it hides menu, and as that’s where Divi’s code puts the logo, the logo goes too. I haven’t yet found a workaround.

      Reply
  19. Greg

    Hey Ysmay, you save my day!

    Reply
  20. lizhil2017

    worked great, what about the footer?

    Reply
  21. Calvyn

    would it be the same if at page attribute, choose blank page as the template?

    Reply
    • Robert Lee Pugh Jr.

      Yes, choosing a blank page template will achieve the same thing.

      Reply
  22. Petals

    Thank-you so much!!

    Reply
    • Ysmay

      You’re welcome!

      Reply
  23. caleb grant

    This work awesome thank you.

    Reply
  24. jengyuni.com

    Awesome Css, Ysmay ! Terima kasih untuk sharingnya.

    Reply
  25. Victor Satoshi

    what should i do if i want to keep the header and the logo but want to just remove the menu?

    Reply
    • Ysmay

      I’m working on a solution to that.

      Reply
  26. Axel

    Amazing, thanks so much!
    How a small trick can have such a big impact, really appreciated

    Reply
  27. Veerlez

    This code doesnt work anymore πŸ™ I would love to use it though!

    Reply
    • Ysmay

      There must be something conflicting on your site. Check your plugins. The code works through editions of Divi 3.0.

      Reply
  28. Loubna El Masri Fathallah

    The logo and menu header disappears, what if u want to only hide the hamburger menu icon

    Reply
    • Ysmay

      I’m looking into this. πŸ™‚

      Reply
  29. melanie

    It works!!! I’ve been looking for a solution for quite some time. Thank you Ysmay!

    Reply
    • Ysmay

      Yay! Glad to help! πŸ˜€

      Reply
  30. John

    Thanks so much for this, worked like a charm. What about a footer menu?

    Reply
    • Ysmay

      You’re welcome. Hide the footer with this:

      #main-footer {
      display: none; }

      Reply
  31. Ali

    Thanks so much, this is very helpful!

    Reply
    • Ysmay

      You’re welcome! Glad it helped!

      Reply
  32. Matt

    This works but I find it delays for like a second…

    Reply
    • Ysmay

      Yeah, that can happen. It has to do with the way browsers load scripts and CSS. Are you minifying CSS?

      Reply
  33. Ekemini

    Thank you so much. This really helped!

    Reply
    • Ysmay

      Yay! You’re welcome.

      Reply
  34. Thank you!

    It worked plus I used your code and added
    #main-footer {
    display: none;
    padding-bottom:40px !important;
    }
    and now the footer is gone on this page. This was necessary as it was in a different language and we don’t want UX to be confusing.
    Except the padding for the footer does not show, why do you think that is?
    thank you!

    Reply
    • Ysmay

      Yeah, so the #main-footer { display: none; code will remove anything inside the footer div, including the padding sizes. You can augment this by putting additional padding in the section just above the footer.

      Reply
  35. Deasha

    The website I am trying to edit will only allow me to edit in visual builder so I cannot see the burger menu like this. Not sure why this is but can you recommend how I can still add the custom CSS?

    Reply
    • Ysmay

      You can get to the custom CSS through the visual builder. It’s in the page settings.

      Reply
  36. Tim Wright

    Thank you. πŸ™‚

    Reply
    • Ysmay

      You’re very welcome!

      Reply
  37. Risto

    OHMYGOSH, YAAAAAY! THANK YOU THANK YOU!

    Reply
    • Ysmay

      Super glad it helped!!

      Reply
  38. Michael

    Great article. Thank you!

    Reply
    • Ysmay

      Glad it helped!

      Reply
  39. Leslie Rice

    It worked like a charm, thank you!

    Reply
    • Ysmay

      Woohoo!

      Reply
  40. Jeannie Schmidt

    Thank you!

    Reply
    • Ysmay

      You’re welcome!!

      Reply
  41. Viviana Lopez Paz

    Would you do the same for the footer on the landing page?

    Reply
    • alumnifhua90bayu

      For footer just add:

      #main-footer {display: none;}

      Reply
  42. Janet Johnson

    Just saved my life…. well… my sanity at least! Many thanks x

    Reply
    • Ysmay

      That’s me, Sanity Saver! lol Glad it helped!

      Reply
  43. Albert

    Great article. Would it be the same only hidden image background and showing menu?

    Reply
    • Ysmay

      Not sure I understand the question, Albert. Would you mind restating?

      Reply

Leave a Reply

Super Helpful Posts

About Ysmay

Ysmay has been building websites professionally since 1999, and is the co-owner of Agency 109.

When she’s not building websites, she can be found mentoring fellow designers, playing Pokemon Go, and listening to gangsta rap.

You can connect with Ysmay futher on her personal site Ysmay.com