Creating a Custom Animated Sticky Header in Elementor Pro (step by step)

[@razorhead2008]

very good tutorial but without the menu and that is pity , thank you Tristan

[@deduice]

Loving this video series. ❤

[@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?

[@DigitalOne-u5k]

Great Useful vids mate. will you share the CSS?

[@mojamals]

Nice header 👍 Could you put the css here ?

[@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; } }