{"id":29766,"date":"2023-04-24T07:08:17","date_gmt":"2023-04-24T05:08:17","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=29766"},"modified":"2023-04-26T08:14:46","modified_gmt":"2023-04-26T06:14:46","slug":"how-to-create-a-sticky-header-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/","title":{"rendered":"How to Create a Sticky Header in Divi"},"content":{"rendered":"\n<p><strong>Struggling to figure out how to create a sticky header on your <\/strong><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">Divi website?<\/a><\/p>\n\n\n\n<p>Look no further! This step-by-step tutorial will explain to you how to make the Divi header sticky in just 5 minutes or less without the need for any plugin or custom CSS code. I will be using the latest features of Divi (Divi&#8217;s sticky options).<\/p>\n\n\n\n<p>Imagine having a sleek, eye-catching sticky header that shows off what makes your business unique\u2014and being able to set it up with ease. With this tutorial, you will achieve that in just a few minutes\u2014regardless of your experience level!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of contents<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#what-is-a-sticky-header\">What is a sticky header in Divi?<\/a><\/li><li><a href=\"#method-1\">Method 1: How to create a fixed header for the default Divi menu<\/a><\/li><li><a href=\"#method-2\">Method 2: How to create a sticky header in the Theme Builder<\/a><\/li><\/ul>\n\n\n<div class=\"gb-container gb-container-82c33ee1 skip-box\"><div class=\"gb-inside-container\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-a824a7ae\">\n<div class=\"gb-grid-column gb-grid-column-021db98c\"><div class=\"gb-container gb-container-021db98c\"><div class=\"gb-inside-container\">\n\n<p class=\"skip-box-p has-base-3-color has-text-color\" style=\"font-size:18px\">I will start with an introduction but you can also just skip that and start right away with the tutorial.<\/p>\n\n<\/div><\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c1298184\"><div class=\"gb-container gb-container-c1298184\"><div class=\"gb-inside-container\">\n<div class=\"gb-button-wrapper gb-button-wrapper-30525548\">\n\n<a class=\"gb-button gb-button-8b89b15c gb-button-text\" href=\"#method-1\"><strong>Skip to Tutorial<\/strong><\/a>\n\n<\/div>\n<\/div><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-a-sticky-header\">What is a sticky header in Divi?<\/h2>\n\n\n\n<p>A sticky or fixed Divi header is a web design aspect that enhances User Experience by holding the header or menu of a site still in place, even as the user scrolls down the webpage.<\/p>\n\n\n\n<p>This feature makes it easier for users to navigate and access crucial information. Sticky headers are especially beneficial for websites with lengthy pages since they make the menu or navigation bar perpetually visible and accessible.<\/p>\n\n\n\n<p>You can quickly jump to different sections of such sites without scrolling back to the page&#8217;s top. So, let&#8217;s consider the perks of using a Divi sticky header.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Improved User Experience<\/h3>\n\n\n\n<p>Using a sticky header will markedly improve the user experience, as visitors can navigate your website with ease. Keeping the menu or navigation bar fixed in place assists in discovering relevant information and mitigates bounce rates. Moreover, using the Divi sticky header enables the customization of the design and layout to match the overall aesthetic of the website, resulting in a cohesive look and feel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Better Mobile Responsiveness<\/h3>\n\n\n\n<p>Websites need to adapt to the mobile era to stay relevant. With plenty of people using smartphones for internet surfing, it&#8217;s imperative to present a website that performs and appears flawlessly. This problem is addressed by the Divi sticky header that is primed for mobile, providing a streamlined and accessible interface for visitors who browse using mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Customizable Design<\/h3>\n\n\n\n<p>Divi&#8217;s sticky header is a fantastic feature thanks to its high level of customization. Adjusting your website&#8217;s header layout and design in accordance with branding becomes easier using Divi.<\/p>\n\n\n\n<p>Besides, the builder offers several header templates that you can personalize to make a unique one. Divi&#8217;s drag-and-drop builder makes incorporating menus, logos, search bars, and more into your sticky header straightforward.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Improved SEO<\/h3>\n\n\n\n<p>Keeping visitors engaged on your website can positively impact search engine optimization (SEO). Longer website visits signal to search engines that your website is valuable and relevant, which can improve your website&#8217;s search engine rankings and traffic. You can increase engagement on your website by using Divi sticky header options, leading to improved SEO and more visitors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Easy to Use<\/h3>\n\n\n\n<p>The Divi sticky header is user-friendly, allowing you to create and customize it using the drag-and-drop builder &#8211; no coding required. Divi also provides a wealth of tutorials and resources for all designer levels to build a beautiful header for their website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"method-1\">Method 1: How to create a fixed header for the default Divi menu<\/h2>\n\n\n\n<p>If you are using the default Divi menu and you want to make it fixed then go to Divi &gt; Theme Options and enable &#8220;Fixed Navigation bar&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"349\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu.jpg\" alt=\"Enable fixed header for the default divi menu\" class=\"wp-image-29773\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu-380x195.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu-300x154.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu-510x262.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu-117x60.jpg 117w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Enable-fixed-header-for-the-default-divi-menu-175x90.jpg 175w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>This will only work for the default <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-menu\/\">Divi menu<\/a>, if you have created a custom header in the Divi Theme Builder then you need to follow the steps in the second method below this one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to style the sticky menu<\/h3>\n\n\n\n<p>Go to Divi &gt; Theme Customizer &gt; Header &amp; Navigation &gt; Fixed Navigation Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"916\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header.jpg\" alt=\"Fixed navigation setting for divi sticky header\" class=\"wp-image-29775\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header-380x512.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header-223x300.jpg 223w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header-510x687.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Fixed-navigation-setting-for-divi-sticky-header-67x90.jpg 67w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>These are the settings for the menu when you are scrolling down. For example, you can change the background color of the menu when you start scrolling down or you can change the font size.<\/p>\n\n\n\n<p>The options are limited for the default menu in Divi. If you want more options then you have to create a custom header\/menu in the Theme Builder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"method-2\">Method 2: How to create a sticky header in the Theme Builder<\/h2>\n\n\n\n<p>With the first method, you can only make the default Divi menu fixed but if you want to make your entire Divi header fixed then this method is for you.<\/p>\n\n\n\n<p>If you have created a custom header in the Theme Builder and want to make it a fixed header then the option &#8220;Fixed Navigation bar&#8221; in the Theme Options will not work.<\/p>\n\n\n\n<p>If you do not know how to create a Global Header then follow this tutorial &#8220;<a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\">How to Create a Custom Divi Header<\/a>&#8220;. This tutorial will explain how you can create a custom Divi header and menu.<\/p>\n\n\n\n<p>Start by navigating to the Global Header.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"588\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header.jpg\" alt=\"Global header\" class=\"wp-image-29776\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header.jpg 636w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header-380x351.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header-300x277.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header-510x472.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header-65x60.jpg 65w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Global-header-97x90.jpg 97w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>Open the section that you want to make sticky. From here go to the Advanced tab and scroll down to Scroll Effects.<\/p>\n\n\n\n<p>Under Sticky Position, you can set to Stick to Top.<\/p>\n\n\n\n<p>Your header will<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"351\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi.jpg\" alt=\"sticky options in Divi\" class=\"wp-image-29779\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi-380x196.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi-300x155.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi-510x263.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi-116x60.jpg 116w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-in-Divi-174x90.jpg 174w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>The entire section will now stick to the top. With the &#8220;Stick Top Offset&#8221; option, you can set a value for the distance between the browser window and the sticky section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to style the Divi sticky header<\/h3>\n\n\n\n<p>Now that the Divi sticky options are enabled for this section there will be a new tab visible (sticky style adjustment) for each element in this section, this also includes all the rows and modules in this section.<\/p>\n\n\n\n<p>For example, the font size for the menu module now has a sticky elements tab. This means you can change the font size when the header gets fixed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"383\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1.jpg\" alt=\"sticky options for the global header\" class=\"wp-image-29778\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1-380x214.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1-300x169.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1-510x287.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1-107x60.jpg 107w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/sticky-options-for-the-global-header-1-160x90.jpg 160w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>You can do this for any element, so your design possibilities are limitless.<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-transparent-header-in-divi\/\">make Divi header transparent<\/a> by setting the background opacity to 0.<\/p>\n\n\n\n<p>You can follow this great tutorial by Elegant Themes for styling a sticky header in Divi:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=79757\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-a-sticky-header-with-divis-sticky-options<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, a sticky header is an important design element to consider when creating or updating your website. Putting the time and effort into making sure it looks perfect and works as intended will go a long way in providing a better experience for viewers, not to mention aiding in the overall success of the site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Struggling to figure out how to create a sticky header on your Divi website? Look no further! This step-by-step tutorial will explain to you how to make the Divi header sticky in just 5 minutes or less without the need for any plugin or custom CSS code. I will be using the latest features of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":29780,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-29766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Sticky Header in Divi (In 5 Minutes)<\/title>\n<meta name=\"description\" content=\"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.\" \/>\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\/how-to-create-a-sticky-header-in-divi\/\" \/>\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 Header in Divi (In 5 Minutes)\" \/>\n<meta property=\"og:description\" content=\"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-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=\"2023-04-24T05:08:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-26T06:14:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create a Sticky Header in Divi\",\"datePublished\":\"2023-04-24T05:08:17+00:00\",\"dateModified\":\"2023-04-26T06:14:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\"},\"wordCount\":1090,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\",\"name\":\"How to Create a Sticky Header in Divi (In 5 Minutes)\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg\",\"datePublished\":\"2023-04-24T05:08:17+00:00\",\"dateModified\":\"2023-04-26T06:14:46+00:00\",\"description\":\"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi sticky header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-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 Create a Sticky Header 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 Create a Sticky Header in Divi (In 5 Minutes)","description":"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.","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\/how-to-create-a-sticky-header-in-divi\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Sticky Header in Divi (In 5 Minutes)","og_description":"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.","og_url":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-04-24T05:08:17+00:00","article_modified_time":"2023-04-26T06:14:46+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create a Sticky Header in Divi","datePublished":"2023-04-24T05:08:17+00:00","dateModified":"2023-04-26T06:14:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/"},"wordCount":1090,"commentCount":2,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/","url":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/","name":"How to Create a Sticky Header in Divi (In 5 Minutes)","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg","datePublished":"2023-04-24T05:08:17+00:00","dateModified":"2023-04-26T06:14:46+00:00","description":"Learn how to quickly and easily create a Divi sticky header on your website with the help of this step-by-step tutorial.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-divi\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/04\/Divi-sticky-header.jpg","width":720,"height":400,"caption":"Divi sticky header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-sticky-header-in-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 Create a Sticky Header 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\/29766","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=29766"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/29766\/revisions"}],"predecessor-version":[{"id":29833,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/29766\/revisions\/29833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/29780"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=29766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=29766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=29766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}