This is one of the most common question,i have found on Elementor Official Groups by taking question as an example,i was on a journey to give you what i learned so far and shared it to you for free. All the code are credited to their respected page
But this blog post is all about custom CSS without the need of 3rd party plugins or addons. You can use the plugin if you prefer or if you don’t want mess about with settings and Custom CSS.
If you are like me and doesn’t rely too much on Additional plugins.This blog post is for you and i will show you how it is done step-by-step.
Create Header Template
Elementor > My Templates > Header > Add New > Give a name for future reference (Main Header) > Create Template
Create Section with Transparent Background
Select structure by clicking "+" icon (Here 2) > Adjust the column width as necessary > Edit Section > Style > Background > Background Type > Set it none or Clear
Drag and Drop Site Logo & Nav Menu widget
Next step is to drag and drop Site logo and Don’t add any style to your logo because we will manually add the custom CSS to the logo.But you can style the nav menu widget because we will not add any custom CSS to it.
Custom CSS for Site Logo when user scroll and to shrink the logo
Create Transparent Sticky Section with Background color when user scroll
In this step,we need to create Transparent+ sticky + background color header when user scroll down when it effect offset reach to 10 px.
And i almost forgot to mention,don’t forget to add min-height value. So the second container custom CSS will apply otherwise you wouldn’t see the effect.
Add some Custom CSS for section and min-height value
Hide Hamburger menu from Mobile
If you want to remove Hamburger menu from mobile and replace with Text then add this Custom code .