Normally, website navigation is displayed on top and disappears when users scroll down. Fixed/sticky navigation menu remains visible and in the same position as the users scroll down and move about a site.
If you want the same on your website, just add the following CSS and JavaScript to your Divi Website.
If you want to display fixed header on the specific pages, use Divi 4.0 conditional logic and insert the divi code module below the menu module and paste the JavaScript snippet. You can do that too with CSS by wrapping the code in the <style> </style> tags or simply paste it into the Custom CSS tab.
CSS
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@media only screen and ( min-width: 480px ) { /* fixed only for deviced > 480px, feel free to change the value */
.fixed-header{
z-index: 999; /* display at the top */
position: fixed;
width: 100%;
top: 0;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
}
}
@media only screen and ( min-width: 782px ) {
.admin-bar .fixed-header {
top: 32px;
}}
Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.1 of the Divi Theme and Divi Friendly Hosting with PHP 7.3.
If you think this code saved you time, we will be happy to receive a comment! :)
____
License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, October 22, 2019. Licensed under the GNU General Public License, no warranty; click here for details.
Hi, I need some help.
My Header section scrolls well but I have a row inside the header sections with images inside. I want the images to disappear on scroll and I’ve been able to do that but now when I scroll the big header shrinks but leaves a lot of white space before the content on the body. Might you have a solution for this?
Using Extra theme, it is already sticky on desktop (and collapses a little on scroll, nice!), but this effect is not available on mobile.
Would this be applicable to Extra theme too? Which breakpoint should I insert in the media query, considered that the menu is sticky only when the menu items are visible, and is not sticky anymore when the hamburger menu takes their place?
Thank you very much!
Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!
There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.
Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.
Hi, I need some help.
My Header section scrolls well but I have a row inside the header sections with images inside. I want the images to disappear on scroll and I’ve been able to do that but now when I scroll the big header shrinks but leaves a lot of white space before the content on the body. Might you have a solution for this?
Hi Malick, can you send link to your site?
Using Extra theme, it is already sticky on desktop (and collapses a little on scroll, nice!), but this effect is not available on mobile.
Would this be applicable to Extra theme too? Which breakpoint should I insert in the media query, considered that the menu is sticky only when the menu items are visible, and is not sticky anymore when the hamburger menu takes their place?
Thank you very much!
I want to be able to do this exact thing, but only with a mobile header. How do I do that?
Use media queries: https://wpzone.co/divi-tutorials/divi-media-queries/
just change the media query width value. (CSS code, line 6)
“@media only screen and ( min-width: 480px ) ”
For tablet and below :
@media only screen and (max-width: 980px)
For phone:
@media only screen and (max-width: 767px)