How to hide the top header on scroll in Divi WordPress theme?

  

2
Topic starter

Hi, I have a WordPress Divi Theme.

How can I hide the top header section/part on scroll?

Where the e-mail, the phone and social links are. And where you can add your own secondary menu.

Please see the screenshot I've made below:

divi top header hide in css

thanks

1 Answer
1

Here is the code my friend (add into the Additional CSS or in your style.css child theme):

/* Hide top header – secondary menu on scroll */
 
#top-header {
    overflow: hidden;
    max-height: 50px;
    transition: max-height .3s ease;
}
 
#top-header.et-fixed-header {
    max-height: 0;
}
 
#main-header {
    transition: top .3s ease;
}
 
#main-header.et-fixed-header {
    top: 0 !important;
}
 
.admin-bar #main-header.et-fixed-header {
    top: 32px !important;
}
Share: