How to Add a Sticky Header or On-scroll Fixed Header with Astra?

No results found. Try again with different words?

Search must be at least 3 characters.

    How to Add a Sticky Header or On-Scroll Fixed Header with Astra?

    This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

    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.

    Note:

    We have released Astra 3.0 which introduces the Header/Footer Builder which changes a few things, you can refer to the below video to know more.

    Quick Steps on How to Add a Sticky Header or On-scroll Fixed Header with the Sticky Header Module
    Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
    Step 2: Activate the Sticky Header module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
    Step 3: Visit customizer [ Appearance > Customize > Header > Sticky Header ] to edit module settings

    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 > Header > Sticky Header

    Sticky Header, Astra 3.0+

    Sticky Header Settings

    Stick Primary Header option will stick the default theme header. (?)

    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 the page scroll.

    Enable Sticky Header, Astra 3.0+

    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 width with a slider.

    Logo for Sticky Header, Astra 3.0+

    If you have activated Colors and Background module from Astra Pro and have set a background color for Header from Appearance > Customize > Header > Sticky Header.

    Then this background color will automatically apply to the sticky header. In this case, you can use the 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.

    Display On

    You can choose to display your sticky header either on desktop or mobile or on both.

    Note: By default, the shadow will appear for a sticky header. If you want to remove it use the custom CSS.

    .main-header-bar.ast-sticky-active {
        box-shadow: unset;
    }

    Colors & Background for Sticky Header 

    In the customizer under Header > Sticky Header all options are available. If you have a sticky primary header, respective options will appear. If Above and Below headers are set as to stick different options for them will appear. 

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.