Sticky sidebar menus not only bring a modern design touch to a website, but also provide visitors with a more immersive scrolling experience. In this article, we'll dive deeper into how to use the Elementor cap (a poem) Elementor Pro Create a powerful sticky sidebar menu.

What is a sticky sidebar menu?

Sticky sidebar menus are different from traditional horizontal navigation menus that occupy vertical space on the left or right side of a website. Such menus are always present on the page, even if the user scrolls down the page, theThe menu will also be fixed in the side positionThis provides continuous navigation options.

Typically, sticky sidebar menus are minimized by default and take up only a small amount of space. Users can click on an icon to expand the menu to show more navigation links. This design is particularly suitable for desktop and tablet users, but for mobile devices, a traditional horizontal menu may still be a better option.

Advantages of sticky sidebar menus

1. Saves vertical space: Sticky sidebar menus place navigation elements vertically, freeing up vertical space at the top and allowing site content to take full advantage of the height of the screen.
2. Enhanced user experience: This menu design provides a unique and modern scrolling experience where users can more easily access navigation options without having to go back to the top of the page.
3. Better organization of content: Through vertical layout, different parts of the website can be displayed in a clearer and more organized manner, which is especially suitable for content-rich websites.

Tools needed to create sticky sidebar menus with Elementor

Before you start creating sticky sidebar menus, you need to prepare the following tools and features:

1. Elementor: This is a popular WordPress page builder that offers a wealth of design and layout options.
2. Elementor Pro: To implement sticky sidebar menus, you'll need to use some of the advanced features in Elementor Pro, such as popups and theme templates.
3. Regular header templates: This is a header template designed for mobile device visitors to ensure a great navigation experience on mobile.
4. Partial template: Used to create minimized state sidebar menus that serve as the basis for sticky sidebars.
5. pop-up window: Used to display a full navigation menu that triggers a popup when the user clicks on the minimized sidebar icon.

Steps to create a sticky sidebar menu

1. Hide general headings in desktop and tablet views

First, you'll needEnsure that existing header templates are displayed only on mobile devices and not on desktops and tablets. To do so, follow the steps below:

• Go to Elementor's Theme Builder (Templates → Theme Builder → Titles), select your title template and edit it with Elementor.

• In the Elementor editor, select the title section and go to "high level"Tab.
• Enable "Hide on Desktop" and "Hide on Tablet" in the "Response" settings.

Doing so ensures that desktop and tablet users only see the sidebar menu and not the regular horizontal header.

2. Creation of partial templates for sidebar navigation

Next, we will create a new template that will be used to define the minimized state of the sidebar menu. This will be what the user sees when they first load the page.

• Go to the Templates area of the WordPress backend, select the "Sections" tab and click "Add New".
• Create a new section containing one column and configure the settings as follows:
  • Content width: full width
  • Column clearance: no clearance
  • Height → Minimum height: 100vh (so that the sidebar takes up the entirevertical height)
  • Column position: stretching
  • HTML tags: title (optional, but helpful for SEO)

In the Styles tab, you can configure the background color or gradient of the sidebar to be consistent with the rest of the site.

3. Configuring column settings and adding widgets

Add some basic widgets to some of the templates, such as website logos, navigation icons (for expanding the full menu), and social media icons.

• Add a logo using the image widget.
• Use the Icon widget to add an icon that will be used to trigger the popup navigation menu. You can choose any suitable icon, such as the Bars icon, and configure its color and hover effect.
• Use the Social Icons widget to add social media links and make sure they are vertically aligned.

After completing the configuration, publish or update some of the templates.

4. Creation of a new one-page template with sidebar navigation

Next, a new one-page template needs to be created using the Elementor theme builder that contains your site's content and sticky side navigation headers.

To do so, please go toTemplates → Theme Builder:

• switch to"Single page" tabs
• click (using a mouse or other pointing device)"Add new"
• Ensure that Selectsingle page As a template type
• Name it.Pages for fixed side navigation

In the Elementor editor, create a section with two columns:

• left column- This will accommodate sticky sidebars
• right-hand column- This will contain the regular content of your site

Configure the right column (content)

To add general content to the right column, add the "Post content"Widget.

Configure the left column (sidebar header)

To add the sidebar navigation header to the left menu, add the template widget. Then, select the one you created in the previous stepSticky sidebar header template.

In addition, transfers to this columnAdvanced Settings, set theZ-indexThe value is set to10000  (ten thousand) and willresponsiveThe control is set to enable"Hidden on mobile devices.". This ensures that only desktop and tablet visitors will see your sticky side navigation headers.

Configure column spacing/layout

The sidebar takes up 50% of the page.To fix this, select the left-hand column (with the sidebar) and the"Layout" tab to itscolumn widthset to5%This will automatically make the right-hand column equal to the right-hand column. This will automatically make the right column equal to95%The

Setting the z-index value ensures that the full navigation popup you create in the next step slides below the side navigation.

selector {
    width: 60px;
}

Copy This CSS ensures that the side navigation is always narrow by setting the width to 60 pixels. Feel free to adjust this number to your liking, but don't deviate too much from 60px.

Configuration Sport Effect

Now we want to make sure that the side navigation is always fixed on the screen.

To do this, click Templates on the right column:

• switch to"Advanced" Tab.
• click (using a mouse or other pointing device)"Movement effects"The
• Put "top"Set to"Top"The
• commander-in-chief (military) "Sticky."set to"Desktop."cap (a poem)"Tablet."The

Now, publish your one-page template and use theDisplay conditionsto control where it is displayed. If you want to use sticky side navigation on every page, set it to display in theAll PagesUp.

If adding to a site that already has some existing page templates, be sure to change all existing templates to "Draft" status to disable them and avoid potential conflicts.

5. Configuring pop-up navigation menus

In order for the user to expand the full navigation menu, we need to create a popup window. This popup will be displayed when the user clicks on the icon in the sidebar.

• Go to Templates → Popups, click "Add New" and create a new popup.
• Configure popup window settings such as width, entry animation, exit animation, etc. and add appropriate margins.
• Add a navigation menu widget to the popup window, making sure the menu items are aligned vertically.

After publishing the popup, return to the sidebar template and configure the dynamic label of the icon to "pop-up window" and select the pop-up menu you just created.

6. Testing and optimization

At this point, your sticky sidebar menu is almost complete. Open the website page and test the functionality and appearance of the sidebar menu to make sure it works as expected.

If you encounter any issues during testing, it is recommended to try using Elementor's Hello theme to ensure there are no conflicts with other themes.

summarize

Sticky sidebar menus bring a whole new design and navigation experience to WordPress websites. By utilizing the power of Elementor and Elementor Pro, you can easily create a flexible and aesthetically pleasing vertical navigation menu that provides a better browsing experience for your visitors.