The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page.
It is a premium feature available with Astra Pro. You can activate the module from Appearance > Astra Options > Sticky Header
You can find the settings under Appearance > Customize > Layout > Header > Sticky Header
Sticky Header Settings
When you choose to stick the Primary Header, all advanced options will appear.
In case if you have enabled the Header Sections Module from Astra Pro, you will see options to stick the Above and the Below header section.
Enabling Stick Above Header Section or Stick Below Header Section will stick the respective header section to the top of page scroll.
Sticky Logo and Logo Width
This allows you to choose a different logo for your Sticky Header than your site logo. Leave this empty if you want to use the same logo as your site logo. You can add normal as well as retina logo and can set easily set a width with a slider.
Sticky Background Opacity
It allows you to set background color opacity for a sticky header. You can choose the value easily with the slider.
If you have activated Colors and Background module from Astra Pro and have set a background color for Header from: Appearance > Customize > Colors & Background > Header > Background Color,
then this background color will automatically apply to the sticky header. In this case, you can use Sticky Background Opacity option to manage the opacity of the background color.
Enable Shrink Effect
It will shrink the sticky header height, logo, and menu size. Sticky Header will display in a compact size. It is useful when you have primary header quite large in height and you want it to be smaller when converting to the sticky header.
Select Animation Effect
Animation effect will appear on sticky header entry.
Slide
It will slide the header from the top.
Fade
The sticky header will fade in.
Hide on scroll down
It will hide the sticky header as the user scrolls down, and show it again when the user scrolls up. It is useful feature mostly for smaller devices.
Display On
You can choose to display your sticky header either on desktop or mobile or on both.
By default, the shadow will appear for a sticky header. If you want to remove it please use the custom CSS.
