Custom Animated Sticky Header in Elementor Pro (Step by step)

[@DigitalOne-u5k]

Great Useful vids mate. will you share the CSS?

[@marcoolinho]

Great and practical video, Mr Parker. Thank you for the effort. I remember you have already made a video about different hero sections and layouts. Is it difficult to set it up with a video as a background on the hero section? Just as a friendly suggestion for an upcoming video, could you make a nitty-gritty one how to set that up properly? You don't put the actual video file in the media section of the WP dashboard, right? What about responsiveness? 16:9 video not the same as 9:16 for smartphones right? So we need different video sizes for it? Can you share you experience with doing it the right way?

[@mojamals]

Nice header 👍 Could you put the css here ?

[@deduice]

Loving this video series. ❤

[@mojamals]

#header-bar .header-internal {
border: 1px solid rgba(0, 0, 0, 0.0);
}
#header-bar.elementor-sticky--effects .header-internal {
/* change the nav background colour & add blur */
background: rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(7px);
/* Pushes nav container away from edges */
margin: 20px 20px;
/* Add rounded edges */
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.8);
}
#header-bar.elementor-sticky--effects .header-internal .sticky-menu-items ul li a {
/* change the nav menu text colour - optional */
color: #fff !important;
}
#header-bar.elementor-sticky--effects .header-internal, #header-bar .header-internal .sticky-menu-items ul li a, #header-bar .elementor-sticky--effects .header-internal .header-logo, #header-bar .header-internal {
transition: .3s all ease-in-out;
}
/* Mobile Styles */
@media (max-width: 767px) {
#header-bar.elementor-sticky--effects .header-internal {
margin: 10px 10px;
background: rgba(0, 0, 0, 0.8) !important;
}
.elementor-nav-menu--dropdown {
margin-left: 10px;
margin-right: 10px;
}
}