We have already shown in a previous snippet how to make the Divi header fixed in Divi 4.0. This snippet is a bit different – because you can set a totally new header upon scroll. That means you can change the logo on scroll, set different navigation, and more!
See the demo below:
1. Create two header sections.
Add a custom ID “header-fixed” to the header you want to display on the scroll.
3. Will this work on mobile devices?
Usually, you don’t want a fixed header on the mobile, as they can take up too much space unnecessarily on already space-challenged mobile screens.
The code below does affect only devices with a minimum of 480px width. That can be easily changed in the CSS code. In the line “@media only screen and ( min-width: 480px )” change the value to anything you want or simply delete the wrapping media query.