Astroid Framework
HomeDownloadReport an IssueVideo Tutorials
English
English
  • What is Astroid
  • Get Started
    • Introduction
    • Technical Requirements
    • Installation
    • Layout Manager for Dummies
    • Creating a basic Astroid Template
  • Astroid Pro
    • Using the License Key
    • Dynamic Content
  • Basic Settings
    • Preloader
    • Favicon
    • Back to Top
    • Wide Vs Box Layout
    • Smooth Scroll
    • Color Mode
    • Container Background Mode
    • Bootstrap Settings
  • Header
    • Header
      • Transparent Header
      • Site Menu Method
    • Logo Options
    • Sticky Header
    • Off-Canvas menu
      • Customize the Offcanvas icons
    • Animation
  • Color
    • Body Color
    • Header Color
    • Sticky Header Color
    • Main Menu Color
    • Dropdown Menu Color
    • Off-Canvas Colors
  • Layout Settings
    • Section Settings
    • Row Settings
    • Element Settings
    • Column Settings
    • Layout Configuration on devices
    • Sub Layouts
  • Astroid Widgets
    • Divider Widget
    • Navigation Widget
    • Icons Widget
    • Button Widget
    • Heading Widget
    • Text Widget
    • Image Widget
    • Slideshow Widget
    • Image Group Widget
    • Testimonials Widget
    • Articles Widget
    • Accordion Widget
    • Grid Widget
    • Form Builder Widget
    • Map Widget
    • List Widget
    • Video Widget
    • Video Button Widget
    • Image Carousel
    • Countdown
    • Raw HTML Widget
    • Module Position
  • Astroid Widgets Pro
    • CodePen Widget
    • Hover Motion Gallery
    • Article Listing
    • Listing Pro
    • Count Down widget
  • Image Motion Cursor
  • Typography
    • Body Typography
    • Menu Typography
    • H1-H6 Typography
    • Drop Down Menu Typography
    • Custom Typography
    • How to use local font
  • Article Blog
    • Article Layout Builder
    • Article Listing Options
    • Single Article Options
    • Blog Options for Single Article view
    • Blog Options for Articles List View
    • Open Graph
    • Custom type comment for Blogs/Articles
  • Social Profile
    • Social Profile
  • Custom Code
    • Tracking Code
    • Before </head>
    • Before </body>
    • Custom Css
    • Custom JS
  • Miscellaneous
    • Lazy Load Images
    • Coming Soon
    • Error Page
    • Copyright
    • Contact Information
    • Minify JS/CSS/HTML
  • Theming
    • Theming
  • Menu Item Settings
    • Blog Options
    • Banner Options
    • Open Graph Options
    • How to manage the Blog Options for Articles List View
  • Mega Menu
    • Mega Menu
  • MORE
    • Preset Profiles
    • Astroid Layout Module
    • Astroid Captcha
  • Developers
    • Get Started
    • Build or Override a Widget
Powered by GitBook

© Astroid Framework 2025.

On this page

Was this helpful?

Export as PDF
  1. Header

Sticky Header

PreviousLogo OptionsNextOff-Canvas menu

Last updated 7 months ago

Was this helpful?

A sticky header is something that sticks to the top of the page while the scroll is scrolling down or decides to go back up.

Sticky Header: Choose whether you want to display the Sticky header or not. If yes then the following options will be visible:

There are 2 different ways you can show the sticky header.

  1. Sticky Menu Mode: Here we have 3 modes:

    • Left: The logo and the menu items are positioned to the left and the header block is to the right.

    • Right: Here the logo is to the left, the menu items and header block are to the right

    • Center: Here the logo is to the left, menu items are in the center and the header block is on the right

  2. Header Block 1: Choose what you want to display in the header blocks from the given options in the dropdown:

    • Blank: Leave the space blank

    • Module Position: Publish a module whose position you can choose in the next option Block Position 1

    • Custom HTML: You can also publish custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

  1. Enable Badge on Sticky Header: Turn on this option if you wish to have the menu's badges displayed on the sticky header.

  2. Sticky Header Logo:

    This option allows you to choose a different logo image for the sticky header (i.e. if you want to upload a smaller logo so the sticky header doesn’t take a lot of space)

  3. Sticky Header on Desktop

    Choose how you want the sticky to be Sticky or Sticky on Scroll up in desktop view.

  4. Sticky Header on Tablets

    Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in the tablet view of your site.

  5. Sticky Header on Mobile

    Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in the mobile view of your site.

Stickly Header Options