10Web Help Center

Hi, how can we help?

How to Make Your Website Header Sticky

Copy article URL

in this article

Sticky headers keep your header or menu constantly visible.

Locating Header template

Method 1: From WordPress Dashboard

  1. Log into your WordPress Dashboard > Templates > 10Web Templates.
  2. Select Header.
  3. Hover on the template and click Edit with Elementor.

Note:

You can edit the Header from 10Web Dashboard AI Builder section. Select the Header tab and click the pencil icon next to your current header template. This action will take you directly to 10Web Builder editor for the selected template.

Method 2: While editing a Page

  1. Open the page you are working on in 10Web Builder editor.
  2. Hover over the header section of the page: an Edit Header option will appear.
  3. Click on the Edit Header option. You will be redirected to the editor for the header currently applied to your website.

Applying sticky mode

  1. Click on the handle of the header to modify, the Edit Container panel will appear on the left-hand side.
  2. Navigate to Advanced and expand Motion Effects.
  3. Select one of the options below for Sticky option:
    None: Disables the sticky header functionality.
    Top: Fixes the header to the top of the screen.
    Bottom: Not applicable for headers; avoid selecting this option.
  4. Choose the devices where the sticky header should be active under Sticky On:
    Desktop: Sticky on desktops and laptops.
    Tablet Portrait: Sticky on tablets in portrait orientation.
    Mobile Portrait: Sticky on mobile devices in portrait mode.

    If Sticky is set to Top you can adjust the following settings:

    • Offset: Shift the sticky element vertically by a specified number of pixels.
    • Effects Offset: Determine the number of pixels a user must scroll before the sticky effect begins.
    • Stay in Column: Toggle to Yes if the section should stay within its column.
  5. Save your changes by clicking Publish. 

in this article