If you ever wanted to create a beautiful transparent header fixed on scroll for your Divi website, this walkthrough is for you. It’s really easy, using just a few CSS snippets that you can copy and paste from here. In the video walkthrough, I guide you step by step through creating the header using mostly Divi options. While all the instructions are covered in the video, the blog post below includes the exact CSS code I used.
Important!
This walkthrough was originally shared with my Divi Stylist Academy community, where students get exclusive access to in-depth design sessions like this one. Plus, stay tuned—I’ll soon be releasing a free layout that features this transparent header effect, making it even easier to implement on your site!
CSS Code Snippets Used:
Here’s the bit of CSS code that moves the page content underneath the header section:
div#et-main-area {
margin-top: -76px;
}
@media (max-width:980px) {
div#et-main-area {
margin-top: -40px;
}
}This bit of code changes the color of menu links on hover, when in “sticky” state:
.et_pb_sticky.et_pb_section .et_pb_module.et_pb_menu li:hover a {
color:purple!important;
}This bit of CSS adds more space between the menu items:
.et_pb_menu.et_pb_module .et_pb_menu__menu>nav>ul>li {
margin-left:20px;
}And that’s it!
I hope you enjoyed this tutorial and got excellent results! Comment below to share your experience or tell me if any part caused you difficulty or was especially fun to do.
If you’d like my personal help and guidance with your web design project or white label help, check out the best ways to work with me here.
0 Comments