How to Add Sticky Header in Astra Theme

Many websites are now designed with a fixed top navigation, which is thesticky header. This is a common design approach where the top navigation is always displayed at the top of the screen when the page is scrolled down, helping to quickly return to themenuor other important link areas.

What is a sticky header

A sticky header is one that remains fixed at the top when the page is scrolledfootersection. Use it to keep navigation menus visible at all times, reducing jump steps and improving access.

Preparation for use

The sticky header feature is part of the Astra Pro As part of the plugin, you need to install Astra Theme with Astra Pro Addon plugin first. Once the plugin is activated, go to the backend and open the relevant module.

Steps to turn on sticky headers

• Install and activate the Astra Pro plug-in
• Go to the backend and click Astra > Dashboard to open the Sticky Header module (in software)

• Go to Appearance > Customization > Header Builder > Sticky Headerto enter the settings page

Available settings for sticky headers

Fixed main header
When enabled, the main navigation stays fixed on display while the page is scrolling.

Fixed top and bottom header areas
If Above Header or Below Header are used, you can set them individually to be fixed or not.

• Above Header Commonly used to add buttons, menus, contact information, etc.
• Below Header can be placedlook for sth.Boxes, secondary menus or short announcements

You need to enable the Header Sections module before you can see the settings.

Logo and Style Adjustment

Setting up different logos
Supports setting different settings for sticky headers logoThe design style is separate from the main site logo.

Add Retina Logo
Supports uploading high-resolution versions of logos for high-resolution devices.

Adjust Logo Width
Sliders can be used to control the width of the logo to fit different device sizes.

Setting the background color and transparency
If the Colors and Background module is enabled, a background color can be set for the sticky header. The background transparency can also be adjusted for visual hierarchy.

Adding a Background Blur Effect

exist Astra In theme version 4.1.0 and above, a new background blur effect has been added to the sticky header, which adds a gentle blurring layer to the navigation bar and gives the page a more modern look. This feature depends on the background color's transparency setting and needs to be enabled manually in the design panel.

The procedure is as follows:

• With the Sticky Header module turned on, go to Appearance > Customize > Header > Sticky Header

• Click on the Primary Header block and go to the "Design" tab.

• Find the "Background Blur" option and turn it on.

• It is recommended to set the background color to semi-transparent to make the blurring effect more obvious and natural

This feature is only available for sticky states with Primary Header enabled and is one of the enhancements provided for the Astra Pro plugin.

Appearance Enhancement Settings

Shrink Effect
When enabled, the sticky header will automatically become smaller in scrolling state to save page space.

animation effect
Entry animation can be added to make the sticky header more dynamic.

Hidden when scrolling down
When enabled, the Sticky Header hides when the page is scrolled down and reappears when it is scrolled up. This option needs to be used in conjunction with Stick Primary Header.

Choose which devices to display on
You can set it to be enabled only on the desktop, mobile device, or both!sticky headerThe

Remove shadow style (optional)

If you don't want the default shadow effect, add the following CSS Code:

#ast-fixed-header .main-header-bar {
box-shadow: unset;
}
#ast-fixed-header .main-header-bar {
box-shadow: unset;
}
#ast-fixed-header .main-header-bar {
box-shadow: unset;
}

summarize

Astra Pro The sticky header feature not only has a simple configuration, but also supports a variety of visual detail settings, including background blur, logo switching, animation, zoom and other effects. Through the rational use of these options, you can create a beautiful, clear, easy-to-operate navigation bar to enhance the overall sense of the entire site.

Related articles