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;
display:inline-block;
width:100%;
}
@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