{"id":2840,"date":"2018-06-02T12:52:40","date_gmt":"2018-06-02T12:52:40","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=2840"},"modified":"2025-04-24T06:39:52","modified_gmt":"2025-04-24T04:39:52","slug":"make-sticky-section-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/","title":{"rendered":"How to make a sticky section in Divi"},"content":{"rendered":"\n

In this tutorial we will be covering how you can create a sticky section. This section will stick at the top when scrolling down. For this we will be using a free plugin called Sticky Menu (or Anything!) on Scroll<\/strong>. You will be learning how to create a section and how to setup the plugin.<\/p>\n\n\n\n

You can see a live demo here.<\/p>\n\n\n

\n\nView Live<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

Step by step tutorial<\/h2>\n\n\n\n

Step 1
<\/strong>In the first step I create a section that is going to be sticky. You can create anything youlike in the demo I just made a section with a 3\/4 \u2013 1\/4 row and placed a text module and a button module. The most important thing is that you need to add a CSS ID in the advanced tab. You can name it anything you like. I named mine stickybar<\/strong><\/p>\n\n\n\n

\"Sticky<\/figure>\n\n\n\n

Step 2
<\/strong>Go to plugins > add new<\/p>\n\n\n\n

Search for Sticky Menu (or Anything!) on Scroll and install\/activate the plugin.<\/p>\n\n\n\n

Then go to Settings > Sticky Menu (or Anything!) on Scroll<\/p>\n\n\n\n

In the Sticky Element<\/strong> field fill in the class name you gave your section. In my case #stickybar<\/strong><\/p>\n\n\n\n

Important:<\/strong> You have to add # in front of your name here<\/p>\n\n\n\n

In the Space between top of page and sticky element: (optional) field I fill in 95. I use a fixed navigation and I want the stickybar underneath it. So I have to add the height here of my navigation. In my case this is 95px but if you use different navigation size it can be another number. You can trial and error the size until you are happy or use a tool like Google inspector. In case you navigation is not sticky then you can leave this field blank.<\/p>\n\n\n\n

In the Do not stick element when screen smaller than: (optional) field I fill in 981 which means that this section will only stick for desktops.<\/p>\n\n\n\n

\"Sticky<\/figure>\n\n\n\n

Then go to the advanced settings tab and fill in the Z-index: (optional) <\/strong>field 999999<\/p>\n\n\n\n

Click on Save settings<\/p>\n\n\n\n

Clear your caches<\/a> and you are done!<\/p>\n\n\n\n

\"Sticky<\/figure>\n\n\n\n

I hope that this little tutorial is useful for you and if you have any questions let me know in the comments.<\/p>\n\n\n\n

Ps: If you want to stay up to date with my new releases (free layouts, tutorials etc) then sign up for my newsletter and\/or follow me on Facebook<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4212,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-2840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"\nHow to make a sticky section in Divi | Markhendriksen.com<\/title>\n<meta name=\"description\" content=\"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make a sticky section in Divi | Markhendriksen.com\" \/>\n<meta property=\"og:description\" content=\"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-02T12:52:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/facebook-post.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to make a sticky section in Divi\",\"datePublished\":\"2018-06-02T12:52:40+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\"},\"wordCount\":403,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\",\"name\":\"How to make a sticky section in Divi | Markhendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg\",\"datePublished\":\"2018-06-02T12:52:40+00:00\",\"dateModified\":\"2025-04-24T04:39:52+00:00\",\"description\":\"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to make a sticky section in Divi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make a sticky section in Divi | Markhendriksen.com","description":"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.","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:\/\/www.markhendriksen.com\/make-sticky-section-divi\/","og_locale":"en_US","og_type":"article","og_title":"How to make a sticky section in Divi | Markhendriksen.com","og_description":"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.","og_url":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2018-06-02T12:52:40+00:00","article_modified_time":"2025-04-24T04:39:52+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/facebook-post.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to make a sticky section in Divi","datePublished":"2018-06-02T12:52:40+00:00","dateModified":"2025-04-24T04:39:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/"},"wordCount":403,"commentCount":14,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/","url":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/","name":"How to make a sticky section in Divi | Markhendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg","datePublished":"2018-06-02T12:52:40+00:00","dateModified":"2025-04-24T04:39:52+00:00","description":"In this step by step tutorial, we will be covering how you can create a sticky section. This section will stick at the top when scrolling down.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2018\/06\/How-to-make-a-sticky-section-in-Divi-builder.jpg","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/make-sticky-section-divi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to make a sticky section in Divi"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/2840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=2840"}],"version-history":[{"count":4,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/2840\/revisions"}],"predecessor-version":[{"id":35638,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/2840\/revisions\/35638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/4212"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=2840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=2840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=2840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}