How to Create Vertical Sticky Headers with Containers in Elementor

What are Vertical Sticky Headings?

Vertical Sticky Headers are a type of header bar that is fixed to the side of the page and stays visible as the user scrolls down the page, allowing for easy access to other page areas or quick navigation. This design can be used for content such as catalogs, navigation menus, and contact information to make browsing easier for the user.

preliminary

Before you start, make sure you have the following in place:

1. Installed and activated Elementor Pro plugin (because the sticky effect requires the Pro version).
2. Created a new page or ready to add vertical sticky headers to an existing page.
3. Already understand the basic usage of the Elementor container (it is recommended that the Flexbox (operating in container mode).

Step 1: Create a single page template

We create a single page template this time, and for this template we create vertical sticky headers with containers.

Go to the template creation page

1. In the WordPress backend, navigate to Elementor > Templates > NewThe

2. In the pop-up window select single page as the template type and name the template, e.g. "Enterprise Service Page Template".

Select Page Type

1. At the top of the template gallery select "Pages." Tags.
2. Browse through the library of available page templates. You can use the search box to find a suitable template style, such as "Services" or "Company".

3. If it is dedicated to a certain type of page, you can also add a specific condition in the condition settings.

Step 2: Creating a Container in Elementor

1,Adding Containers

On the page, click "Adding a new container" and drag it to the page design area. This container will serve as the parent container for the vertical sticky header.

2,Setting the container orientation

Select the container, and in the settings panel on the left, set the container's orientation to perpendicular, i.e. vertically aligned so that content can be stacked vertically. This step is the key to achieving vertical headings.

3,Define container width

In "type" tab, set the width of the container to an appropriate size, such as 200px or less, to ensure that it does not take up too much space on the page. You can customize this width according to the page design and requirements.

Step 3: Create a vertical sticky navigation bar

Insertion of headings and navigation items

• In the container, add a "caption" widget, set the title to "Quick Navigation" or "Catalog".

Add List

• Underneath the title, continue to add in the same container as the title Icon List maybe Button WidgetUsed as a navigational itemWe use a list of iconsThe

• Added:

Add Project

• About Us: Click on it to jump to the company profile section.
• Service: Jump to the Service Program Description area.
• Testimonials: Jump to the Customer Feedback section.
• Contact Us: Jump to contact information and forms.

Names and icons can be modified.

Setting up anchor links

Add anchor links to the list of buttons or icons for each navigation item. Set anchors for each content section of the page, for example #about-us,#services,#testimonials,#contact-Us etc.

• set upAbout Usanchor point
  • In the Elementor editor, find the "Menu Anchor" Widget. Drag the widget above the title of the About Us section (or other suitable location). In the widget's settings, enter a name for the anchor point (e.g. about-us) to link to that location later.

• Setting Anchor Links
  • Back to the list of iconsAbout Usat the top of the page, add#about-usYou can click the jump after the anchor link.

• The remaining menu items follow this procedure to set their anchor links.

Customize navigation bar style

• In "type" tab to customize the fonts, colors, and spacing to match the style of your website.

• configurablebackground color, margins and shadow effects to make the navigation bar clearer and more independent.

Step 4: Setting the Sticky Effect

To make the sidebar stay fixed while the user scrolls, follow these steps:

1. Setting CSS IDs for navigation bars and content areas

Select the navigation bar container and "high level " tab to add a CSS ID; for example, set the ID tosidebar The

• Add custom CSS code

Open Custom CSS (Global Settings or Custom CSS for Navigation Bar Container) in Elementor. Add the following code:

#sidebar{
    position: fixed; /* Fixed sidebar position, does not move when scrolling */
    left: 0; /* Align the sidebar to the left side of the page */
    top: 0; /* Sidebar starts at the top of the page */
    height: 100vh; /* Set sidebar height to window height */
    width: 200px; /* Adjust the width of the sidebar as required */
    z-index: 10; /* Ensure the sidebar is above other elements */
    padding-top: 250px; /* Adjust the top inner margin as required */
    overflow-y: auto; /* Allow scrolling when sidebar content is long */

    display: flex; /* Layout using flexbox */
    flex-direction: column; /* Align content vertically */ justify-content: center; //
    justify-content: center; /* vertically centered content */
}

Step 5: Add background style and shadow effect (optional)

Setting the background color
In "type" tab, select the appropriate background color to ensure that the containers are clearly distinguishable on the page.

Adding a shadow effect
In order to make the sticky title look more hierarchical, you can set the shadow effect in the "Box Shadow" to make it have a visual effect of hovering on the page.

Step 6: Preview and Publish

1. Preview effect
   Click on the page "previews" button to see how the sticky header behaves when the page is scrolled. Make sure that the container is always fixed at the top of the page when scrolling and is not overwritten by other elements.
2. Adjustments
   According to the preview effect, adjust the size, alignment, and margins of the container of the title content to ensure that the content is clear and does not affect the layout of other elements on the page.
3. Launch page
   After confirming that everything is working properly, click "post" button to bring the page online. Your vertical sticky header has been created.

Summary:

Vertical sticky headers are navigation bars that are fixed to the side of a page and can be kept visible as the user scrolls, allowing them to quickly access different parts of the page. Creating such headers in Elementor involves a few key steps: first, create a single page template and add a vertically oriented container as the body of the sticky header bar. Next, add headings and navigation items to the container, using a list of icons or button widgets with anchor links for each item. Then, apply CSS code to anchor the sidebar, making sure it's always visible when scrolling.