{"id":42410,"date":"2020-09-09T09:55:52","date_gmt":"2020-09-09T09:55:52","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=42410"},"modified":"2025-12-03T17:33:13","modified_gmt":"2025-12-03T15:33:13","slug":"how-to-create-sticky-sidebar-menu","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/","title":{"rendered":"How to Create a Sticky Sidebar Menu on WordPress"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"42410\" class=\"elementor elementor-42410\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b586ba3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b586ba3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cd9e33f\" data-id=\"cd9e33f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6f75229 elementor-widget elementor-widget-text-editor\" data-id=\"6f75229\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>About the author: Roy Eyal, Elementorist @ Elementor<\/b><\/p><p>Roy Eyal is an expert Elementorist at Elementor and a WordPress <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-does-a-web-developer-do\/\"   title=\"What Does a Web Developer Do? 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25756\">web developer<\/a> that loves design and working with designers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccacaaf elementor-widget elementor-widget-text-editor\" data-id=\"ccacaaf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Want to get access to more vertical space on your WordPress website and create <a href=\"https:\/\/elementor.com\/blog\/sticky-scrolling-effect\/\" target=\"_blank\" rel=\"noopener\">an immersive scrolling experience<\/a>? A sticky sidebar menu might be just the key.<\/p>\n<p>With this type of header, you can vertically stick your menu and navigation on the <a href=\"https:\/\/elementor.com\/blog\/wordpress-sidebar-guide\/\">sidebar of your WordPress website<\/a>, rather than using a traditional horizontal menu:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f81756 elementor-widget elementor-widget-video\" data-id=\"5f81756\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2020\/09\/Sticky-Side-Nav-Header.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25687d8 elementor-widget elementor-widget-text-editor\" data-id=\"25687d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this post, we&#8217;ll show you step-by-step how to create this sticky sidebar navigation menu using Elementor and Elementor Pro. Let&#8217;s dig in!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4540e997 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4540e997\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/wordpress-sidebar-guide\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Check Out Our Complete Sidebar Guide<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e4f7c9 elementor-widget elementor-widget-heading\" data-id=\"5e4f7c9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is a Sticky Sidebar Menu?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-692a724 elementor-widget elementor-widget-text-editor\" data-id=\"692a724\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unlike a traditional or <a href=\"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/\">shrinking sticky header<\/a> that sticks horizontally at the top of your site, a sticky sidebar header occupies vertical space on either the left or the right of your site.<\/p><p>It&#8217;s always there, but it takes up very little space in its default minimized state. If a visitor wants to expand the full menu, they can click the icon to make the full navigation menu &#8220;slide out&#8221;.<\/p><p>Here&#8217;s what the sticky sidebar menu looks like by default:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35ff9a7 elementor-widget elementor-widget-image\" data-id=\"35ff9a7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/sticky-sidebar-menu-closed-r4q75im8mykbrujczsdhhd7d62xvpx82nd279sjshe.png\" title=\"sticky-sidebar-menu-closed\" alt=\"sticky-sidebar-menu-closed\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52c350d elementor-widget elementor-widget-text-editor\" data-id=\"52c350d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And here&#8217;s how it looks if a visitor clicks to expand the full menu:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-630c71b elementor-widget elementor-widget-image\" data-id=\"630c71b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/sticky-sidebar-menu-open-r4q74g2uur3kju3c8tps54xgta7tybz2u2balg4xki.png\" title=\"sticky-sidebar-menu-open\" alt=\"sticky-sidebar-menu-open\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ada3135 elementor-widget elementor-widget-text-editor\" data-id=\"ada3135\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>One thing to keep in mind is that this effect really only works for desktop and tablet visitors \u2014 it&#8217;s not a viable option for mobile visitors. For that reason, you&#8217;ll still want to have a regular fallback header that loads for mobile visitors. We&#8217;ll help you set up this fallback mobile header in the tutorial.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0948974 elementor-widget elementor-widget-heading\" data-id=\"0948974\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Are the Benefits of a Sticky Sidebar Menu?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d65d41 elementor-widget elementor-widget-text-editor\" data-id=\"4d65d41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The main benefit is that this type of header leaves more vertical space for your content because there&#8217;s no header taking up space at the top. You can use 100% of the vertical space \u2014 all you need to do is sacrifice a little space on the side.<\/p><p>This also creates an immersive scrolling experience for your visitors while still giving them access to your navigation at any time.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a434c2 elementor-widget elementor-widget-heading\" data-id=\"1a434c2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What You Need to Create a Sticky Sidebar Menu With Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1d6423 elementor-widget elementor-widget-text-editor\" data-id=\"b1d6423\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To create your sticky sidebar menu, you&#8217;ll need to combine a few different templates\/features. Here&#8217;s what you&#8217;ll need:<\/p><ul><li><strong>Regular header &#8211; <\/strong>this will be the fallback header that your site uses for mobile visitors. You&#8217;ll hide this header for desktop and tablet visitors so that you can use your sidebar header instead.<\/li><\/ul><ul><li><strong>Section <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25757\">template<\/a><\/strong> &#8211; you&#8217;ll create a separate section template for your minimized sidebar header (the default state).<\/li><\/ul><ul><li><strong>Popup menu<\/strong> &#8211; this is the full sidebar navigation that appears when a visitor clicks on the minimized sidebar menu. In the example above, the popup is what contains the actual menu links for &#8220;Homepage&#8221;, &#8220;About&#8221;, etc.<\/li><\/ul><ul><li><strong>Page template<\/strong> &#8211; this is what lets you tell Elementor to display your sidebar header alongside your regular content.<\/li><\/ul><p>Because you&#8217;ll need to work with popups and theme templates, you need Elementor Pro to follow this tutorial. If you don&#8217;t already have it, you can <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\">purchase your copy here<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-66227e77 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"66227e77\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2b8d52ea\" data-id=\"2b8d52ea\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-329cb8c1 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"329cb8c1\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Prefer a Shrinking Header? Learn How To Create One<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d4d680 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d4d680\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cf7398e\" data-id=\"cf7398e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bee92c8 elementor-widget elementor-widget-heading\" data-id=\"bee92c8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Create a Sticky Sidebar Menu\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12a1b60 elementor-widget elementor-widget-heading\" data-id=\"12a1b60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Hide Your Header on Desktop and Tablet View\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32918f5 elementor-widget elementor-widget-text-editor\" data-id=\"32918f5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To get started, you need to make sure that your existing header only displays to mobile visitors (and footer if your site has one).<\/p><p>To do that, open your header template using Elementor <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25758\">Theme Builder<\/a> (<strong>Templates \u2192 Theme Builder \u2192 Header. <\/strong>Then, find your header&#8217;s name and click <strong>Edit with Elementor<\/strong>).\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5714c2a elementor-widget elementor-widget-image\" data-id=\"5714c2a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/templates-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jtnk.png\" title=\"Elementor Templates\" alt=\"Elementor Templates\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f5faf4 elementor-widget elementor-widget-text-editor\" data-id=\"2f5faf4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Or, if you haven&#8217;t created your initial header template yet, you can create a new header template to serve as your mobile header (<span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif;\">you can also create a blank header template for desktop only)<\/span><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif;\">. Elementor Pro includes a number of pre-built templates that you can start from. Or, you can always build your mobile header from scratch. For reference, we&#8217;re using the header template from <\/span><a style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif;\" href=\"https:\/\/library.elementor.com\/digital-marketing-agency\/\" target=\"_blank\" rel=\"noopener\">the Digital Agency template kit<\/a><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif;\">.<\/span><\/p><p>Once you&#8217;ve opened the Elementor interface, open the settings for the section that contains your header:<\/p><ul><li>Go to the <strong>Advanced <\/strong>tab.<\/li><li>Find the <strong>Responsive<\/strong> settings.<\/li><li>Use the toggle to enable <strong>Hide On Desktop <\/strong>and <strong>Hide on Tablet<\/strong> in the <strong>Visibility<\/strong> settings.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-018e018 elementor-widget elementor-widget-image\" data-id=\"018e018\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"612\" height=\"1050\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=612,h=1050\/blog\/wp-content\/uploads\/2020\/09\/header-hide-on-desktop.png\" class=\"attachment-full size-full wp-image-42418\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=612\/blog\/wp-content\/uploads\/2020\/09\/header-hide-on-desktop.png 612w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=175\/blog\/wp-content\/uploads\/2020\/09\/header-hide-on-desktop-175x300.png 175w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=597\/blog\/wp-content\/uploads\/2020\/09\/header-hide-on-desktop-597x1024.png 597w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c29d46 elementor-widget elementor-widget-heading\" data-id=\"6c29d46\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Create a New Template for Your Sidebar Navigation\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-216a84b elementor-widget elementor-widget-text-editor\" data-id=\"216a84b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, it&#8217;s time to create the section template that will act as your sidebar navigation.<\/p><p><strong>Note &#8211; <\/strong>at first, everything in your template will look very large &#8211; much too large to work as a sidebar navigation menu. Don&#8217;t panic! You&#8217;re not doing anything wrong &#8211; later on, you&#8217;re going to fix this with some <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25759\">CSS<\/a> that we provide.<\/p><p>To create your template, go to the <strong>Templates <\/strong>area in your dashboard:<\/p><ol><li>Go to the <strong>Section<\/strong> tab.<\/li><li>Click <strong>Add New<\/strong>.<\/li><li>Name it <strong>Sticky Side-Nav Header.<\/strong><\/li><\/ol><p><strong>Note #2 <\/strong>&#8211; you&#8217;re creating a regular &#8220;Section&#8221; template &#8211; <strong>not <\/strong>a &#8220;Header&#8221; template with Theme Builder (even though you&#8217;re going to use this template as your sticky side-nav header).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c000511 elementor-widget elementor-widget-heading\" data-id=\"c000511\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Section Settings\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab97c60 elementor-widget elementor-widget-text-editor\" data-id=\"ab97c60\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First, create a new section with one column. Under the <strong>Layout<\/strong> settings, configure the section like so:<\/p><ul><li><strong>Content Width<\/strong>: Full Width<\/li><li><strong>Columns Gap<\/strong>: No Gap<\/li><li><strong>Height \u2192 Min Height<\/strong>: 100vh (this configures your sidebar header to take up 100% of the vertical height)<\/li><li><strong>Column Position<\/strong>: Stretch<\/li><li><strong>HTML Tag<\/strong>: header (this is optional, but it&#8217;s good for SEO to configure it this way)<\/li><\/ul><p>Once you&#8217;ve configured the layout, you can go to the <strong>Style<\/strong> tab to configure the background of your side-nav. You&#8217;ll want to choose a color or gradient that matches the rest of your site.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13fe341 elementor-widget elementor-widget-heading\" data-id=\"13fe341\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Column Settings\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc106bf elementor-widget elementor-widget-text-editor\" data-id=\"dc106bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, open the settings for the single column inside your section:<\/p><ul><li>In the <strong>Layout<\/strong> tab, set the <strong>Vertical Align<\/strong> drop-down equal to <strong>Space Between<\/strong>.<\/li><li>In the <strong>Advanced<\/strong> tab, add a <strong>50px<\/strong> padding to the bottom of the column.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-209b175 elementor-widget elementor-widget-heading\" data-id=\"209b175\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Add Widgets\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f39838 elementor-widget elementor-widget-text-editor\" data-id=\"2f39838\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, you can add the widgets to display on your sidebar menu. For our example, we&#8217;ve added:<\/p><ul><li>A logo<\/li><li>An icon to open the full menu<\/li><li>Social follow icons<\/li><\/ul><p><strong>Note <\/strong>&#8211; remember that you&#8217;ll be using a popup to contain your actual navigation menu items \u2014 you don&#8217;t need to worry about adding a navigation menu quite yet. All you need to do is add the icon that visitors will click to open the full menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d8a549 elementor-widget elementor-widget-heading\" data-id=\"4d8a549\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Site Logo:\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69456a1 elementor-widget elementor-widget-text-editor\" data-id=\"69456a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add your logo image using an Image widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ee4892 elementor-widget elementor-widget-heading\" data-id=\"0ee4892\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Icon:\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98a302c elementor-widget elementor-widget-text-editor\" data-id=\"98a302c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add the toggle icon using an Icon widget. For our example, we used the <strong>Bars<\/strong> icon. However, you can use any icon, or even an image or Lottie file. Just make sure that visitors will be able to clearly understand that they can open the full menu by clicking this.<\/p><p>You should also choose a color and hover color that matches your theme.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cfa125 elementor-widget elementor-widget-heading\" data-id=\"7cfa125\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Social Icons:\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-624fc65 elementor-widget elementor-widget-text-editor\" data-id=\"624fc65\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can add as many social networks as you want using the Social Icons widget. You can also configure the shapes and colors to match your theme.<\/p><p>To make sure your social icons are aligned vertically in a single column, you should select 1 as the number of columns.<\/p><p>And that&#8217;s it! Make sure to Publish\/Update your section template and then go back to the WordPress dashboard.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3487055 elementor-widget elementor-widget-image\" data-id=\"3487055\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"600\" height=\"1011\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600,h=1011\/blog\/wp-content\/uploads\/2020\/09\/social-icons-widget.png\" class=\"attachment-full size-full wp-image-42734\" alt=\"Social Icons Widget - Single Column\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2020\/09\/social-icons-widget.png 600w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=178\/blog\/wp-content\/uploads\/2020\/09\/social-icons-widget-178x300.png 178w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5918d61 elementor-widget elementor-widget-heading\" data-id=\"5918d61\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Create a New Single Page Template That Includes Your Sidebar Navigation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e51ba1b elementor-widget elementor-widget-text-editor\" data-id=\"e51ba1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you need to use Elementor Theme Builder to create a new Single Page template that includes both your site&#8217;s content and your sticky side-nav header.<\/p><p>To do this, go to <strong>Templates \u2192 Theme Builder:<\/strong><\/p><ul><li>Go to the <strong>Single Page\u00a0<\/strong>tab<\/li><li>Click <strong>Add New<\/strong><\/li><li>Make sure\u00a0<strong>Single Page<\/strong>\u00a0is selected as the template type<\/li><li>Name it <strong>Page with Fixed Side-Nav<\/strong><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9ddc83 elementor-widget elementor-widget-image\" data-id=\"a9ddc83\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/single-page-template-1-r4q78vvf4l6bdjn8bqscx0ltssc8avlg417u6hjzik.png\" title=\"single-page-template\" alt=\"single-page-template\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00cf200 elementor-widget elementor-widget-text-editor\" data-id=\"00cf200\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the Elementor editor, create a section with two columns:<\/p><ul><li><strong>Left column <\/strong>&#8211; this will hold the sticky sidebar<\/li><\/ul><ul><li><strong>Right column<\/strong> &#8211; this will contain your site&#8217;s regular content<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2959e12 elementor-widget elementor-widget-heading\" data-id=\"2959e12\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Right Column (Content)\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-501c513 elementor-widget elementor-widget-text-editor\" data-id=\"501c513\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To add your regular content to the right column, add the\u00a0<strong>Post Content<\/strong> widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb1eb61 elementor-widget elementor-widget-image\" data-id=\"eb1eb61\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"582\" height=\"914\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582,h=914\/blog\/wp-content\/uploads\/2020\/09\/elementor-post-content.png\" class=\"attachment-full size-full wp-image-42900\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582\/blog\/wp-content\/uploads\/2020\/09\/elementor-post-content.png 582w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=191\/blog\/wp-content\/uploads\/2020\/09\/elementor-post-content-191x300.png 191w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6998e40 elementor-widget elementor-widget-heading\" data-id=\"6998e40\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Left Column (Sidebar Header)\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7ac57e elementor-widget elementor-widget-text-editor\" data-id=\"c7ac57e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To add your side-nav header to the left menu, add a Template widget. Then, select the <strong>Sticky Sidebar Header<\/strong> template that you created in the previous step.<\/p>\n<p>Additionally, go to the <strong>Advanced<\/strong> settings for this column and set the <strong>Z-index<\/strong> value to <strong>10000<\/strong>&nbsp;(ten thousand) and set the <strong>Responsive<\/strong> controls to enable <strong>Hide on Mobile<\/strong>. This ensures that only desktop and tablet visitors see your sticky side-nav header.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c4fd5a elementor-widget elementor-widget-image\" data-id=\"4c4fd5a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"940\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=724,h=940\/blog\/wp-content\/uploads\/2020\/09\/z-index-10000.jpg\" class=\"attachment-full size-full wp-image-43000\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=724\/blog\/wp-content\/uploads\/2020\/09\/z-index-10000.jpg 724w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=231\/blog\/wp-content\/uploads\/2020\/09\/z-index-10000-231x300.jpg 231w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b5d328 elementor-widget elementor-widget-heading\" data-id=\"8b5d328\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Column Spacing\/Layout\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b18571b elementor-widget elementor-widget-text-editor\" data-id=\"b18571b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Right now, your side-nav takes up 50% of the page. To fix that, select the left column (with your side-nav) and set its <strong>Column Width<\/strong> equal to <strong>5%<\/strong> in the <strong>Layout<\/strong> tab. This should automatically make the right column equal to <strong>95%<\/strong>.<\/p><p>Setting the z-index value makes sure that the full navigation popup that you&#8217;ll create in the next step slides underneath the side-nav.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-affce5a elementor-widget elementor-widget-code-highlight\" data-id=\"affce5a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>selector {\n    width: 60px;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f839e6 elementor-widget elementor-widget-text-editor\" data-id=\"9f839e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This CSS makes sure the side-nav always stays narrow by setting the width equal to 60 pixels. Feel free to adjust this number according to your preferences, just don&#8217;t deviate too much from 60px.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48bd590 elementor-widget elementor-widget-image\" data-id=\"48bd590\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"1128\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=596,h=1128\/blog\/wp-content\/uploads\/2020\/09\/custom-css.png\" class=\"attachment-full size-full wp-image-42737\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=596\/blog\/wp-content\/uploads\/2020\/09\/custom-css.png 596w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=159\/blog\/wp-content\/uploads\/2020\/09\/custom-css-159x300.png 159w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=541\/blog\/wp-content\/uploads\/2020\/09\/custom-css-541x1024.png 541w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4402abe elementor-widget elementor-widget-heading\" data-id=\"4402abe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Configure Motion Effects<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-147ba75 elementor-widget elementor-widget-text-editor\" data-id=\"147ba75\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we want to ensure the side-nav stays fixed on the screen at all times.<\/p><p>To do this, click the template on the right column:<\/p><ul><li>Go to the <strong>Advanced\u00a0<\/strong>tab.<\/li><li>Click <strong>Motion Effects<\/strong>.<\/li><li>Set\u00a0<strong>Sticky<\/strong> to <strong>Top<\/strong>.<\/li><li>Set\u00a0<strong>Sticky On<\/strong> to <strong>Desktop<\/strong> and <strong>Tablet<\/strong>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad4e236 elementor-widget elementor-widget-image\" data-id=\"ad4e236\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"1068\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600,h=1068\/blog\/wp-content\/uploads\/2020\/09\/motion-effects-sticky.png\" class=\"attachment-full size-full wp-image-42738\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2020\/09\/motion-effects-sticky.png 600w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=169\/blog\/wp-content\/uploads\/2020\/09\/motion-effects-sticky-169x300.png 169w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=575\/blog\/wp-content\/uploads\/2020\/09\/motion-effects-sticky-575x1024.png 575w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea85892 elementor-widget elementor-widget-text-editor\" data-id=\"ea85892\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, Publish your Single Page template and use the <strong>Display Conditions<\/strong> to control where it appears. If you want to use your sticky side-nav on every single page, set it to display on <strong>All Pages<\/strong>.<\/p><p>If you&#8217;re adding this to a site where you already have some existing page templates, make sure to change all those existing templates to &#8220;Draft&#8221; status to disable them and avoid potential conflicts.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de52d60 elementor-widget elementor-widget-heading\" data-id=\"de52d60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Create the Popup Navigation Menu\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c45f5de elementor-widget elementor-widget-text-editor\" data-id=\"c45f5de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you need to create the popup that displays the full navigation menu when a visitor clicks on the icon in your side-nav header. The popup will slide underneath the side-nav to create a really neat effect.<\/p><p>For the tutorial steps below, we&#8217;ll keep things simple. However, you can experiment as much as you want here to create something really awesome. If you want to learn more about creating menus with Elementor Popup Builder, <a href=\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\" target=\"_blank\" rel=\"noopener\">check out our full guide on that topic<\/a>.<\/p><p>To get started, go to <strong>Templates \u2192 Popups \u2192 Add New <\/strong>and give your popup a name to help you remember it, like <strong>Sliding Nav.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2216727 elementor-widget elementor-widget-heading\" data-id=\"2216727\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Configure Popup Settings\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2237118 elementor-widget elementor-widget-text-editor\" data-id=\"2237118\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Open the <strong>Popup Settings<\/strong> by clicking the gear icon in the bottom-left corner and configure them like so:<\/p><ul><li><strong>Width<\/strong>: 450px<\/li><li><strong>Height<\/strong>: Fit to Screen<\/li><li><strong>Horizontal Position<\/strong>: Left<\/li><li><strong>Overlay<\/strong>: Hide (turned off)<\/li><li><strong>Entrance Animation<\/strong>: Slide In Left<\/li><li><strong>Exit Animation<\/strong>: Slide Out Left<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d56fe4c elementor-widget elementor-widget-image\" data-id=\"d56fe4c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"1408\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=618,h=1408\/blog\/wp-content\/uploads\/2020\/09\/popup-settings.png\" class=\"attachment-full size-full wp-image-42417\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=618\/blog\/wp-content\/uploads\/2020\/09\/popup-settings.png 618w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=132\/blog\/wp-content\/uploads\/2020\/09\/popup-settings-132x300.png 132w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=449\/blog\/wp-content\/uploads\/2020\/09\/popup-settings-449x1024.png 449w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b638568 elementor-widget elementor-widget-text-editor\" data-id=\"b638568\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To make sure your popup appears to the right of the existing side-nav when it slides out, you need to add a margin:<\/p><ul><li>Go to the <strong>Advanced <\/strong>tab.<\/li><li>Find the <strong>Margin<\/strong> settings.<\/li><li>Add 60 pixels to the left (or the right if you chose to display the sticky side-nav on the other side).<\/li><li>Add 20 pixels under <strong>Padding<\/strong>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8927c95 elementor-widget elementor-widget-image\" data-id=\"8927c95\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"1398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600,h=1398\/blog\/wp-content\/uploads\/2020\/09\/popup-margin.png\" class=\"attachment-full size-full wp-image-42421\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2020\/09\/popup-margin.png 600w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=129\/blog\/wp-content\/uploads\/2020\/09\/popup-margin-129x300.png 129w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=439\/blog\/wp-content\/uploads\/2020\/09\/popup-margin-439x1024.png 439w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef087ee elementor-widget elementor-widget-heading\" data-id=\"ef087ee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Add Your Navigation Menu\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10e83dd elementor-widget elementor-widget-text-editor\" data-id=\"10e83dd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, use widgets to add your navigation menu to the body of the popup. In my example, I used four Heading widgets. You could also use the Nav Menu widget to quickly add one of your existing navigation menus &#8211; just make sure to set the <strong>Layout<\/strong> equal to <strong>Vertical. <\/strong>You also might want to <strong>Align<\/strong> it to center.<\/p><p>Again, for a deeper look, <a href=\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\" target=\"_blank\" rel=\"noopener\">check out our full guide<\/a>.<\/p><p>Once you&#8217;re finished, make sure to <strong>Publish<\/strong> your popup. You don&#8217;t need to configure any display conditions, triggers, or advanced rules &#8211; you&#8217;ll handle triggering your popup in the next step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6421cd3 elementor-widget elementor-widget-heading\" data-id=\"6421cd3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Configure Side-Nav Icon to Trigger Full Nav Menu Popup\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea5ba33 elementor-widget elementor-widget-text-editor\" data-id=\"ea5ba33\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To finish things out, you need to set it up so that your navigation menu popup slides out when a visitor clicks on the icon in your side-nav section template.<\/p><p>To do this, go to <strong>Templates \u2192 Saved Templates<\/strong> and edit your existing <strong>Sticky Side-Nav Header<\/strong> section template.<\/p><p>Open the settings for the navigation icon. Then:<\/p><ol><li>Click on the <strong>Dynamic Tags<\/strong> option for the <strong>Link<\/strong>.<\/li><li>Choose <strong>Popup<\/strong> under <strong>Actions<\/strong> in the list of dynamic tag options.<\/li><\/ol><p>Once you&#8217;ve set the link equal to <strong>Popup<\/strong>:<\/p><ol><li>Click the <strong>Wrench<\/strong> icon to choose the specific popup.<\/li><li>Set the <strong>Action<\/strong> equal to <strong>Toggle Popup<\/strong>.<\/li><li>Use the <strong>Popup<\/strong> search field to search for and select the <strong>Sliding Nav<\/strong> popup that you created in the previous step.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ad024a elementor-widget elementor-widget-image\" data-id=\"0ad024a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"1266\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=610,h=1266\/blog\/wp-content\/uploads\/2020\/09\/nav-icon-popup.png\" class=\"attachment-full size-full wp-image-42420\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=610\/blog\/wp-content\/uploads\/2020\/09\/nav-icon-popup.png 610w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=145\/blog\/wp-content\/uploads\/2020\/09\/nav-icon-popup-145x300.png 145w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=493\/blog\/wp-content\/uploads\/2020\/09\/nav-icon-popup-493x1024.png 493w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2e1d9b elementor-widget elementor-widget-text-editor\" data-id=\"a2e1d9b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then, update your section template.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb98747 elementor-widget elementor-widget-heading\" data-id=\"eb98747\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Test and Enjoy\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43ce921 elementor-widget elementor-widget-text-editor\" data-id=\"43ce921\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At this point, you should be all finished! Open up a page on your site and make sure that your new sticky side-nav header is working as expected.<\/p><p>If you&#8217;re having any issues, try temporarily switching over to the <a href=\"https:\/\/elementor.com\/hello-theme\/\" target=\"_blank\" rel=\"noopener\">Hello theme<\/a> to make sure there&#8217;s no conflict with your theme.<\/p><p>While this tutorial should work with any WordPress theme, there&#8217;s always the chance of unexpected issues. If your sticky side-nav header works in Hello but not in your theme, you might want to reach out to your theme&#8217;s developer for help.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6f4e9d elementor-widget elementor-widget-heading\" data-id=\"a6f4e9d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create Your Sticky Sidbar Menu Today\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71dc37b elementor-widget elementor-widget-text-editor\" data-id=\"71dc37b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using a sticky side-nav header helps you create more vertical space on your site with an immersive scrolling experience.<\/p><p>With Elementor Pro and this tutorial, you can easily set up a side-nav header on your WordPress site. Give it a try today!<\/p><p>Still have any questions about setting up this header? Used it on your site already and want to share? Let us know in the comments!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tired of the standard horizontal menu? In this post, our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.<\/p>\n","protected":false},"author":507054,"featured_media":42411,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45,44,167],"tags":[79],"marketing_persona":[51],"marketing_intent":[49],"class_list":["post-42410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-elementor","category-elementor-team-writes","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Sticky Sidebar Menu on WordPress | Elementor<\/title>\n<meta name=\"description\" content=\"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Sticky Sidebar Menu on WordPress | Elementor\" \/>\n<meta property=\"og:description\" content=\"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/roy.eyal\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T09:55:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T15:33:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roy Eyal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@royeyal\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roy Eyal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\"},\"author\":{\"name\":\"Roy Eyal\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052\"},\"headline\":\"How to Create a Sticky Sidebar Menu on WordPress\",\"datePublished\":\"2020-09-09T09:55:52+00:00\",\"dateModified\":\"2025-12-03T15:33:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\"},\"wordCount\":2262,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Development\",\"Elementor\",\"Elementor Team Writes\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\",\"url\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\",\"name\":\"How to Create a Sticky Sidebar Menu on WordPress | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png\",\"datePublished\":\"2020-09-09T09:55:52+00:00\",\"dateModified\":\"2025-12-03T15:33:13+00:00\",\"description\":\"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Sticky Sidebar Menu on WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052\",\"name\":\"Roy Eyal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g\",\"caption\":\"Roy Eyal\"},\"description\":\"An expert Elementorist at Elementor and a WordPress web developer that loves design and working with designers. Dev by day, bass player at night.\",\"sameAs\":[\"https:\/\/elementor.com\/author\/roy-eyal\/\",\"https:\/\/www.facebook.com\/roy.eyal\/\",\"https:\/\/www.instagram.com\/royeyal\/\",\"https:\/\/www.linkedin.com\/in\/royeyalcom\/\",\"https:\/\/x.com\/royeyal\",\"https:\/\/www.youtube.com\/royeyal\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/roy-eyal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Sticky Sidebar Menu on WordPress | Elementor","description":"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Sticky Sidebar Menu on WordPress | Elementor","og_description":"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.","og_url":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_author":"https:\/\/www.facebook.com\/roy.eyal\/","article_published_time":"2020-09-09T09:55:52+00:00","article_modified_time":"2025-12-03T15:33:13+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png","type":"image\/png"}],"author":"Roy Eyal","twitter_card":"summary_large_image","twitter_creator":"@royeyal","twitter_site":"@elemntor","twitter_misc":{"Written by":"Roy Eyal","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/"},"author":{"name":"Roy Eyal","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052"},"headline":"How to Create a Sticky Sidebar Menu on WordPress","datePublished":"2020-09-09T09:55:52+00:00","dateModified":"2025-12-03T15:33:13+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/"},"wordCount":2262,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png","keywords":["Build"],"articleSection":["Development","Elementor","Elementor Team Writes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/","url":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/","name":"How to Create a Sticky Sidebar Menu on WordPress | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png","datePublished":"2020-09-09T09:55:52+00:00","dateModified":"2025-12-03T15:33:13+00:00","description":"Our Elementor expert shows you step-by-step how to create a vertical sidebar navigation menu for an immersive scrolling experience.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/09\/Create-a-Sticky-Side-Nav-Menu_internal.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How to Create a Sticky Sidebar Menu on WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/2ba1a8835804a94218c0bd2e57078052","name":"Roy Eyal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b1e740e51c9b2a284e78aba985295df558287fbc08a4481f7c46213b724582c?s=96&d=mm&r=g","caption":"Roy Eyal"},"description":"An expert Elementorist at Elementor and a WordPress web developer that loves design and working with designers. Dev by day, bass player at night.","sameAs":["https:\/\/elementor.com\/author\/roy-eyal\/","https:\/\/www.facebook.com\/roy.eyal\/","https:\/\/www.instagram.com\/royeyal\/","https:\/\/www.linkedin.com\/in\/royeyalcom\/","https:\/\/x.com\/royeyal","https:\/\/www.youtube.com\/royeyal"],"url":"https:\/\/elementor.com\/blog\/author\/roy-eyal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/42410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/507054"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=42410"}],"version-history":[{"count":9,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/42410\/revisions"}],"predecessor-version":[{"id":146490,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/42410\/revisions\/146490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/42411"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=42410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=42410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=42410"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=42410"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=42410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}