52 Comments

1. Riccardo on June 19, 2017 at 10:52 am

   Hi, i used your code:
   /* Hide entire header on homepage */
   .home #main-header { display: none; }

   but in mobile site i've a white 'padding' from top and page doesn't fit well (from top).
   How can i do? Thanks!!

   Reply
   • dan on June 20, 2017 at 5:55 am

     Hi Riccardo, you can use this to change the padding on mobiles (and tablets):

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

     You can adjust the 58px to increase / decrease the amount of padding.

     Reply
     • Riccardo on June 20, 2017 at 1:52 pm

       Thank you, i've resolve with margin and not padding! Thank you!! :)

       .home #main-header { display:none; }

       @media only screen and (max-width: 990px) {
       body{
       margin-top: -163px;
       }

       Reply
2. Lauren on June 11, 2017 at 7:27 am

   Hi Dan,
   Any suggestions on how to hide the secondary menu on desktop displays, but still maintain it on the mobile and tablets?
   I can hide it overall, but am struggling to differentiate between mobile and desktop in the css.

   Reply
   • dan on June 11, 2017 at 11:25 pm

     Hi Lauren, I think what you want here is a CSS "media query". Media queries can be wrapped around a regular bit of CSS code and specify the conditions under which the CSS applies. For example:

     @media only screen and (min-width: 981px) {
         #top-header { display: none; }
     }
     

     This takes the regular CSS for hiding the top header (i.e. "#top-header { display: none; }") and wraps it in a media query (the @media bit) which specifies that the CSS should only apply when the browser window is at least 981px wide. 981px corresponds with the width at which Divi switches to desktop displays, so the result is that the top header will be hidden on desktop displays, but not on mobile / tablets.

     Reply
3. Lisa on June 8, 2017 at 1:51 pm

   Hi, can you advise how to hide the primary menu only so it doesn't appear on the homepage? Thank you.

   Reply
   • dan on June 9, 2017 at 7:10 am

     Hi Lisa, one of these two CSS snippets should do the trick:

     /* Hide entire header on homepage */
     .home #main-header { display: none; }
     
     /* Hide the menu links / search icon on homepage */
     .home #et-top-navigation { visibility: hidden; }
     

     Reply
     • Lisa on June 9, 2017 at 9:20 am

       Thanks Dan! Your second suggestion worked :)

       Reply
     • Brick on June 10, 2017 at 7:00 pm

       Thank you so much!

       Reply
4. Luis Casanova on May 25, 2017 at 2:33 am

   Life saver! Thanks a lot.

   Reply
5. George on May 1, 2017 at 9:54 am

   Thank you divibooster!

   Reply
6. Samuel on April 14, 2017 at 7:53 am

   Hi.. is there a way to have this work only on the desktop side? I would like to still have the links visible on mobile.

   Reply
   • dan on April 17, 2017 at 1:17 am

     Hi Samuel, you can make this apply to the desktop only, by changing it to:

     @media only screen and (min-width: 981px) {
         #et-top-navigation { visibility: hidden; }
     }
     

     Reply
     • Samuel on April 20, 2017 at 12:24 pm

       Hi Dan.. Awesome, Thanks a bunch :)

       Reply
7. Noi on February 17, 2017 at 1:18 am

   This is awesome!! Thanks so much :)

   Reply
8. Vsevolod on February 5, 2017 at 8:38 pm

   Thank you!

   Reply
9. Erica Krysta on April 4, 2016 at 11:17 pm

   Great tip! Thank you :)

   Reply
10. Tiffany on April 3, 2016 at 7:21 pm

    Can you provide a way to remove the phone and email icons? I want to put a tagline there instead.

    Reply
    • dan on April 5, 2016 at 7:23 am

      Hi Tiffany, this post gives a (slightly different) way to do it:

      https://divibooster.com/how-to-add-text-to-divi-top-header/

      When you've added the tagline, you can then just delete the phone number / email address in the customizer to get rid of their icons.

      Reply
11. Jordan Campbell on March 20, 2016 at 12:45 am

    This seems to have hidden my logo as well….

    Reply
    • dan on March 21, 2016 at 5:06 am

      Hi Jordan, sorry about that. Changes to the way Divi implements its header stopped the feature from working. I've just updated the post with a (simpler) solution which works with the latest versions of Divi.

      Reply
12. Mark Thayer on February 19, 2016 at 5:01 pm

    Does it matter where I paste this code?

    Reply
    • dan on February 19, 2016 at 10:41 pm

      Hi Mark, there are a few places you can add the code (any should work), as outlined in this post:

      https://divibooster.com/adding-css-to-the-divi-theme/

      Reply