{"id":11980,"date":"2024-08-07T11:48:32","date_gmt":"2024-08-07T09:48:32","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=11980"},"modified":"2025-04-24T06:40:04","modified_gmt":"2025-04-24T04:40:04","slug":"how-to-create-a-custom-divi-header","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/","title":{"rendered":"How to Create a Custom Divi Header"},"content":{"rendered":"\n<p>One of the coolest things you can do with Divi is create a custom header that not only looks amazing but also perfectly aligns with your brand&#8217;s identity. In this guide, we&#8217;re going to walk you through everything you need to know to craft a stunning custom header in Divi. Whether you&#8217;re a seasoned pro or a newbie, we&#8217;ve got you covered. Let&#8217;s get started!<\/p>\n\n\n<div class=\"gb-container gb-container-9b7667b2\">\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li><a href=\"#guide-divi-header\">Step-by-Step Guide to Creating a Custom Divi Header<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#step-1\">Step 1: Add Global Header<\/a><\/li>\n\n\n\n<li><a href=\"#step-2\">Step 2: Section Settings<\/a><\/li>\n\n\n\n<li><a href=\"#step-3\">Step 3: First Row<\/a><\/li>\n\n\n\n<li><a href=\"#step-4\">Step 4: Social Media Module<\/a><\/li>\n\n\n\n<li><a href=\"#step-5\">Step 5: Text Module Middle Column<\/a><\/li>\n\n\n\n<li><a href=\"#step-6\">Step 6: Text Module Right Column<\/a><\/li>\n\n\n\n<li><a href=\"#step-7\">Step 7: Second Row<\/a><\/li>\n\n\n\n<li><a href=\"#step-8\">Step 8: Image Module<\/a><\/li>\n\n\n\n<li><a href=\"#step-9\">Step 9: Menu Module<\/a><\/li>\n\n\n\n<li><a href=\"#step-10\">Step 10: Button Module<\/a><\/li>\n\n\n\n<li><a href=\"#step-11\">Step 11: Tablet &amp; Mobile Row<\/a><\/li>\n\n\n\n<li><a href=\"#step-12\">Step 12: Menu module for tablet and mobile<\/a><\/li>\n\n\n\n<li><a href=\"#step-13\">Step 13: Button Module for Tablet and Mobile<\/a><\/li>\n\n\n\n<li><a href=\"#step-14\">Step 14: Add Custom CSS Code<\/a><\/li>\n\n\n\n<li><a href=\"#step-15\">Step 15: Add jQuery Code<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#test\">Conclusion<\/a><\/li>\n<\/ul>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"guide-divi-header\">Step-by-Step Guide to Creating a Custom Divi Header<\/h2>\n\n\n\n<p>In this tutorial, I provide a detailed, step-by-step guide to creating a custom Divi header. From initial setup to final touches, every step is explained with clear instructions and screenshots.<\/p>\n\n\n\n<p>Before I jump into the step-by-step process, let&#8217;s take a sneak peek at the final result. <\/p>\n\n\n<div class=\"gb-container gb-container-960241a0\">\n\n<a class=\"gb-button gb-button-71c6f6fd gb-button-text\" href=\"https:\/\/dividemowebsite.markhendriksen.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>See Demo<\/strong><\/a>\n\n<\/div>\n\n\n<p>This is the header we are going to create. It features a top bar with three columns: social media icons on the left, a tagline in the middle, and some text links on the right. Below the top bar, you&#8217;ll find our logo on the left, the menu in the middle, and a call-to-action button on the right.<\/p>\n\n\n\n<p>Prefer watching over reading? Check out my comprehensive YouTube video tutorial below. In this video, I walk you through the entire process, making it easy to follow along and implement the steps on your own site.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create a Stunning Custom Header in Divi - Step-by-Step Tutorial\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/f5NELIm398w?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1\">Step 1: Add Global Header<\/h3>\n\n\n\n<p>Go to Divi &gt; Theme Builder and click on Add Global Header.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"425\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header.jpg\" alt=\"Add Global Header\" class=\"wp-image-35068\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header-380x238.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header-300x188.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header-510x319.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header-96x60.jpg 96w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-Global-Header-144x90.jpg 144w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Then click on Build Global Header.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"425\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header.jpg\" alt=\"Build Global header\" class=\"wp-image-35069\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header-380x238.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header-300x188.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header-510x319.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header-96x60.jpg 96w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Build-Global-header-144x90.jpg 144w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2\">Step 2: Section Settings<\/h3>\n\n\n\n<p>Open the section and go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the top and bottom padding to 0px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding.jpg\" alt=\"\" class=\"wp-image-35076\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Section-top-and-bottom-padding-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and under CSS Class place <strong>custom-header<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header.jpg\" alt=\"\" class=\"wp-image-35074\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-section-for-the-header-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3\">Step 3: First Row<\/h3>\n\n\n\n<p>Add a new row for this Section and choose the 1\/4 &#8211; 1\/2 &#8211; 1\/4 layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"220\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row.jpg\" alt=\"add a new row\" class=\"wp-image-35078\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-380x123.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-300x97.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-510x165.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-185x60.jpg 185w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-278x90.jpg 278w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Open this row and under Background set a color. I use color code <strong>#16264a<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"321\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color.jpg\" alt=\"Top row background color\" class=\"wp-image-35080\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color-380x179.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color-300x142.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color-510x241.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color-127x60.jpg 127w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Top-row-background-color-191x90.jpg 191w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sizing<\/h4>\n\n\n\n<p>Enable &#8220;Use Custom Gutter Width&#8221; and set it to 0.<\/p>\n\n\n\n<p>Set the Width and Max-Width to 100%.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings.jpg\" alt=\"Row design settings\" class=\"wp-image-35082\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the top and bottom padding to 5px.<\/p>\n\n\n\n<p>Set the left and right padding to 25px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding.jpg\" alt=\"Top row padding\" class=\"wp-image-35083\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/top-row-padding-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and under CSS Class place <strong>custom-top-row<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row.jpg\" alt=\"Add a class to the top row\" class=\"wp-image-35085\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-class-to-the-top-row-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4\">Step 4: Social Media Module<\/h3>\n\n\n\n<p>Place a social media follow module in the first column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module.jpg\" alt=\"\" class=\"wp-image-35088\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-social-media-follow-module-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open this module and place your social media networks here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks.jpg\" alt=\"\" class=\"wp-image-35089\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-networks-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Then open each social media network and make the background color transparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon.jpg\" alt=\"Background color social media icon\" class=\"wp-image-35090\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Background-color-social-media-icon-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go back to the social media module settings and switch to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Alignment<\/h4>\n\n\n\n<p>Center the alignment for tablet and mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"387\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile.jpg\" alt=\"Center social media for mobile\" class=\"wp-image-35092\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile-380x216.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile-300x171.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile-510x290.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile-105x60.jpg 105w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-social-media-for-mobile-158x90.jpg 158w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Icon<\/h4>\n\n\n\n<p>Enable &#8220;Use Custom Icon Size&#8221; and set the size to 13px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size.jpg\" alt=\"Social media icon size\" class=\"wp-image-35093\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-icon-size-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and place the class <strong>custom-social<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class.jpg\" alt=\"Social media class\" class=\"wp-image-35094\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Social-media-class-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5\">Step 5: Text Module Middle Column<\/h3>\n\n\n\n<p>Place a text module in the middle column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"320\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module.jpg\" alt=\"Place a text module\" class=\"wp-image-35096\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module-380x179.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module-300x141.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module-510x240.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module-128x60.jpg 128w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-text-module-191x90.jpg 191w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>In the text field place your text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text.jpg\" alt=\"Place text\" class=\"wp-image-35097\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-text-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Text<\/h4>\n\n\n\n<p>Set the text font style to Uppercase.<br>Set the text color to white.<br>Set the text letter spacing to 1px.<br>Set the text alignment to the center.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings.jpg\" alt=\"Text settings\" class=\"wp-image-35098\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-6\">Step 6: Text Module Right Column<\/h3>\n\n\n\n<p>Place a text module in the right column.<\/p>\n\n\n\n<p>Place your text links in the body field.<\/p>\n\n\n\n<p>To create a vertical line hold ALT, then press 1, 2, and 4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links.jpg\" alt=\"Text module with links\" class=\"wp-image-35099\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Text-module-with-links-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Text<\/h4>\n\n\n\n<p>Set the text color to white.<br>Set the text alignment to right.<br>Set the alignment to center for tablet and mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color.jpg\" alt=\"text link color\" class=\"wp-image-35101\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/text-link-color-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Switch to the Link tab and set the link color to white.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab.jpg\" alt=\"Link tab\" class=\"wp-image-35102\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Link-tab-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-7\">Step 7: Second Row<\/h3>\n\n\n\n<p>Add another row for this Section and choose the 1\/4 &#8211; 1\/2 &#8211; 1\/4 layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"220\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row.jpg\" alt=\"\" class=\"wp-image-35078\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-380x123.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-300x97.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-510x165.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-185x60.jpg 185w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/add-a-new-row-278x90.jpg 278w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open this row and under Background set the color to white.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color.jpg\" alt=\"Second row background color\" class=\"wp-image-35103\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-background-color-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sizing<\/h4>\n\n\n\n<p>Enable &#8220;Use Custom Gutter Width&#8221; and set it to 0.<\/p>\n\n\n\n<p>Set the Width and Max-Width to 100%.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings.jpg\" alt=\"Row design settings\" class=\"wp-image-35082\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-design-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the top and bottom padding to 15px.<\/p>\n\n\n\n<p>Set the left and right padding to 25px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding.jpg\" alt=\"Second row padding\" class=\"wp-image-35105\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-padding-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Box Shadow<\/h4>\n\n\n\n<p>Under Box shadow select the third option.<\/p>\n\n\n\n<p>And make the shadow color rgba(0,0,0,0.1)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row.jpg\" alt=\"Add a shadow to the row\" class=\"wp-image-35162\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-a-shadow-to-the-row-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and under CSS Class place <strong>custom-menu-row<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class.jpg\" alt=\"Second row class\" class=\"wp-image-35107\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Second-row-class-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Visibility<\/h4>\n\n\n\n<p>Under visibility check disable on phone and tablet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility.jpg\" alt=\"row visibility\" class=\"wp-image-35130\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/row-visibility-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Scroll Effects<\/h4>\n\n\n\n<p>Set the sticky position to &#8220;Stick to Top&#8221;. For tablet and mobile, I set this to &#8220;Do Not Stick&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky.jpg\" alt=\"\" class=\"wp-image-35152\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Make-header-sticky-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-8\">Step 8: Image Module<\/h3>\n\n\n\n<p>Place an image module in the first column of the second row.<\/p>\n\n\n\n<p>Open this module and place your logo in it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module.jpg\" alt=\"Place a logo in the image module\" class=\"wp-image-35109\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-in-the-image-module-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open the Link tab and place \/ in the link field. This will redirect the logo to your home page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link.jpg\" alt=\"Logo link\" class=\"wp-image-35111\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Logo-link-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-9\">Step 9: Menu Module<\/h3>\n\n\n\n<p>Place a menu module in the middle column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"320\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module.jpg\" alt=\"menu module\" class=\"wp-image-35113\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module-380x179.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module-300x141.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module-510x240.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module-128x60.jpg 128w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-module-191x90.jpg 191w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Assign your menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu.jpg\" alt=\"Set your menu\" class=\"wp-image-35114\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-your-menu-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Layout<\/h4>\n\n\n\n<p>Under style choose Centered.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu.jpg\" alt=\"Center menu\" class=\"wp-image-35116\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Center-menu-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Text<\/h4>\n\n\n\n<p>Set the active and menu text color to black.<br>Set the font weight to semi-bold.<br>set the font size to 18px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings.jpg\" alt=\"menu font settings\" class=\"wp-image-35117\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/menu-font-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Dropdown menu<\/h4>\n\n\n\n<p>Set the dropdown menu line color to <strong>#910d0d<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color.jpg\" alt=\"\" class=\"wp-image-35148\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/dropdown-menu-top-line-color-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and under CSS Class place <strong>custom-menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu.jpg\" alt=\"Custom menu\" class=\"wp-image-35121\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Custom-menu-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-10\">Step 10: Button Module<\/h3>\n\n\n\n<p>Place a button module in the right column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"316\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module.jpg\" alt=\"Place a button module\" class=\"wp-image-35123\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module-380x177.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module-300x139.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module-510x237.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module-129x60.jpg 129w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-button-module-194x90.jpg 194w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place a title for your button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name.jpg\" alt=\"Give the button a name\" class=\"wp-image-35125\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-button-a-name-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Alignment<\/h4>\n\n\n\n<p>Under alignment choose right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment.jpg\" alt=\"Button alignment\" class=\"wp-image-35126\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-alignment-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Button<\/h4>\n\n\n\n<p>Enable &#8220;Use Custom Styles For Button&#8221;.<br>Set the font size to 16px.<br>Set the button text color to white.<br>Set the background color to #910d0d.<br>Set the border width to 0px.<br>Set the button font-weight to semi-bold.<br>Set the button font style to uppercase.<br>Disable the show button icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings.jpg\" alt=\"Button settings\" class=\"wp-image-35127\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the top and bottom padding to 8px.<br>Set the left and right padding to 20px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding.jpg\" alt=\"Button padding\" class=\"wp-image-35128\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-padding-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-11\">Step 11: Tablet &amp; Mobile Row<\/h3>\n\n\n\n<p>Add a new row and use a 1 column structure.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"264\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile.jpg\" alt=\"Row for tablet and mobile\" class=\"wp-image-35132\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile-380x148.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile-300x116.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile-510x198.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile-155x60.jpg 155w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Row-for-tablet-and-mobile-232x90.jpg 232w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open the row settings and go to the Design tab, under sizing set the width and max-width to 100%.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent.jpg\" alt=\"Set row to 100 percent\" class=\"wp-image-35133\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Set-row-to-100-percent-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the top, bottom, left, and right padding to 15px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding.jpg\" alt=\"Spacing padding\" class=\"wp-image-35150\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Spacing-padding-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the advanced tab and under Visibility check Desktop.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop.jpg\" alt=\"Hide row for desktop\" class=\"wp-image-35135\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hide-row-for-desktop-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-12\">Step 12: Menu module for tablet and mobile<\/h3>\n\n\n\n<p>Add a menu module to this row.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Content<\/h4>\n\n\n\n<p>Assign your menu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Logo<\/h4>\n\n\n\n<p>Place your logo here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu.jpg\" alt=\"Place a logo for your menu\" class=\"wp-image-35137\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-logo-for-your-menu-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Menu Text<\/h4>\n\n\n\n<p>Set the active and menu text colors.<br>Set the font size to 16px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings.jpg\" alt=\"Mobile menu font settings\" class=\"wp-image-35138\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-font-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Dropdown Menu<\/h4>\n\n\n\n<p>Set the dropdown menu line color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color.jpg\" alt=\"Mobile menu line color\" class=\"wp-image-35139\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-line-color-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Icons<\/h4>\n\n\n\n<p>Set the hamburger menu icon color.<br>Set the hamburger icon size to 40px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings.jpg\" alt=\"Hamburger icon settings\" class=\"wp-image-35140\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Hamburger-icon-settings-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Spacing<\/h4>\n\n\n\n<p>Set the bottom margin to 15px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin.jpg\" alt=\"Mobile menu bottom margin\" class=\"wp-image-35141\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Mobile-menu-bottom-margin-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-13\">Step 13: Button Module for Tablet and Mobile<\/h3>\n\n\n\n<p>Duplicate the button module we created earlier and drag it below the menu for tablet and mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"133\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button.jpg\" alt=\"Duplicate button\" class=\"wp-image-35142\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button-380x74.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button-300x59.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button-510x100.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button-190x37.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Duplicate-button-460x90.jpg 460w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open this button module and we are going to change the alignment.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Alignment<\/h4>\n\n\n\n<p>Change the alignment to center.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment.jpg\" alt=\"Change the button alignment\" class=\"wp-image-35143\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Change-the-button-alignment-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"516\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class.jpg\" alt=\"Button class\" class=\"wp-image-35145\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class-380x288.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class-300x228.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class-510x387.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class-79x60.jpg 79w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Button-class-119x90.jpg 119w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab and under CSS Class place <strong>button-mobile<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-14\">Step 14: Add Custom CSS Code<\/h3>\n\n\n\n<p>Now we only have to place some CSS and jQuery code.<\/p>\n\n\n\n<p>Go to Divi &gt; Theme Options &gt; CSS<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"294\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1.jpg\" alt=\"CSS code\" class=\"wp-image-35154\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1-380x164.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1-300x130.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1-510x221.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1-139x60.jpg 139w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/CSS-code-1-208x90.jpg 208w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>And place the following in there:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@media screen and (min-width: 981px) {\n.custom-menu-row,\n.custom-top-row {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; \n}\n\n\/* #### Dropdown Menu #### *\/ \n\n.custom-menu li li a { \n  border-bottom: 1px solid #e5e5e5; \/* #### Dropdown border bottom #### *\/ \n  font-weight: 600 !important; \/* #### Dropdown font weight #### *\/ \n  font-size: 15px !important; \/* #### Dropdown font size #### *\/ \n}\n  \n.custom-menu li li:last-child a { \n  border-bottom: 0px solid #e5e5e5; \/* #### Dropdown border bottom #### *\/ \n}\n  \n.custom-menu ul.sub-menu {\n  padding: 0px 0 0 0 !important;\n  border-top-width: 2px; \/* #### Dropdown border top width #### *\/ \n}\n\n.custom-menu ul.sub-menu ul {\n  padding: 0px !important;\n}\n\n.custom-menu li li ul {\n  top: -2px !important;;\n}\n\n.custom-menu  li li {\n  padding: 0px !important;\n}\n\n.custom-menu li li a {\n  padding: 6px 20px;\n  width: 240px !important;\n}}\n\n.custom-social li  {\n  margin-bottom: 0px;\n}\n\n.button-mobile {\n\twidth: 100%;\n}\n\n@media screen and (max-width: 980px) {\n.custom-top-row .et_pb_column {\n  margin-bottom: 0px !important;\n}}\n\n\/* #### Collaping Mobile Menu #### *\/\n\nul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,\n.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {\n\tcolor: #ffffff; \/* Icon color *\/\n\tbackground: #16264a; \/* Icon background color *\/\n\tfont-size: 22px; \/* Icon size *\/\n\ttop: 10px;\n\tposition: relative;\n\tfont-family: &quot;ETModules&quot;;\n\tcontent: &#039;\\33&#039;;\n\tborder-radius: 4px;\n\tpadding: 1px 2px 1px 0px;\n}\n\n.et_mobile_menu .menu-item-has-children&gt;a {\n    font-weight: 400 !important; \n}\n\nul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open&gt;.mobile-toggle-icon::after,\n.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open&gt;.mobile-toggle-icon::after {\n\tcontent: &#039;\\32&#039;;\n}\n\nul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,\nul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,\n.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,\n.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {\n\twidth: 44px;\n\theight: 100%;\n\tpadding: 0px !important;\n\tmax-height: 44px;\n\tborder: none;\n\tposition: absolute;\n\tright: 0px;\n\ttop: 0px;\n\tz-index: 999;\n\tbackground-color: transparent;\n}\n\nul.et_mobile_menu&gt;li.menu-item-has-children,\nul.et_mobile_menu&gt;li.page_item_has_children,\nul.et_mobile_menu&gt;li.menu-item-has-children .sub-menu li.menu-item-has-children,\n.et-db #et-boc .et-l ul.et_mobile_menu&gt;li.menu-item-has-children,\n.et-db #et-boc .et-l ul.et_mobile_menu&gt;li.page_item_has_children,\n.et-db #et-boc .et-l ul.et_mobile_menu&gt;li.menu-item-has-children .sub-menu li.menu-item-has-children {\n\tposition: relative;\n}\n\n.et_mobile_menu .menu-item-has-children&gt;a,\n.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children&gt;a {\n\tbackground-color: transparent;\n}\n\nul.et_mobile_menu .menu-item-has-children .sub-menu,\n#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,\n.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,\n.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {\n\tdisplay: none !important;\n\tvisibility: hidden !important;\n}\n\nul.et_mobile_menu .menu-item-has-children .sub-menu.visible,\n#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,\n.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,\n.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {\n\tdisplay: block !important;\n\tvisibility: visible !important;\n}\n\nul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,\n.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {\n\ttext-align: center;\n\topacity: 1;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-15\">Step 15: Add jQuery Code<\/h3>\n\n\n\n<p>For the collapsing mobile menu we need to add some jQuery code.<\/p>\n\n\n\n<p>Go to Divi &gt; Theme Options &gt; Integration &gt; Add code to the &lt; head &gt; of your blog<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"296\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code.jpg\" alt=\"\" class=\"wp-image-35155\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code-380x165.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code-300x131.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code-510x222.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code-138x60.jpg 138w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/jQuery-code-207x90.jpg 207w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place the following in here:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script&gt;\njQuery(function($) {\n    $(document).ready(function() {\n        $(&quot;body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children&quot;).append(&#039;&lt;a href=&quot;#&quot; class=&quot;mobile-toggle-icon&quot;&gt;&lt;\/a&gt;&#039;);\n        $(&#039;ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon, ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon&#039;).click(function(event) {\n            event.preventDefault();\n            $(this).parent(&#039;li&#039;).toggleClass(&#039;mobile-toggle-open&#039;);\n            $(this).parent(&#039;li&#039;).find(&#039;ul.children&#039;).first().toggleClass(&#039;visible&#039;);\n            $(this).parent(&#039;li&#039;).find(&#039;ul.sub-menu&#039;).first().toggleClass(&#039;visible&#039;);\n        });\n        iconFINAL = &#039;P&#039;;\n        $(&#039;body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children&#039;).attr(&#039;data-icon&#039;, iconFINAL);\n        $(&#039;.mobile-toggle-icon&#039;).on(&#039;mouseover&#039;, function() {\n            $(this).parent().addClass(&#039;active-toggle&#039;);\n        }).on(&#039;mouseout&#039;, function() {\n            $(this).parent().removeClass(&#039;active-toggle&#039;);\n        })\n    });\n});\n&lt;\/script&gt;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":35188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-11980","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 Custom Divi Header | Markhendriksen.com<\/title>\n<meta name=\"description\" content=\"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.\" \/>\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-custom-divi-header\/\" \/>\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 Custom Divi Header | Markhendriksen.com\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\" \/>\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=\"2024-08-07T09:48:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:40:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/05\/How-to-create-a-custom-Divi-header-1.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=\"17 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-custom-divi-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create a Custom Divi Header\",\"datePublished\":\"2024-08-07T09:48:32+00:00\",\"dateModified\":\"2025-04-24T04:40:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\"},\"wordCount\":1229,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\",\"name\":\"How to Create a Custom Divi Header | Markhendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg\",\"datePublished\":\"2024-08-07T09:48:32+00:00\",\"dateModified\":\"2025-04-24T04:40:04+00:00\",\"description\":\"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to create a custom Divi header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#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 Custom Divi Header\"}]},{\"@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 Custom Divi Header | Markhendriksen.com","description":"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.","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-custom-divi-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Custom Divi Header | Markhendriksen.com","og_description":"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.","og_url":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2024-08-07T09:48:32+00:00","article_modified_time":"2025-04-24T04:40:04+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/05\/How-to-create-a-custom-Divi-header-1.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create a Custom Divi Header","datePublished":"2024-08-07T09:48:32+00:00","dateModified":"2025-04-24T04:40:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/"},"wordCount":1229,"commentCount":20,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/","url":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/","name":"How to Create a Custom Divi Header | Markhendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg","datePublished":"2024-08-07T09:48:32+00:00","dateModified":"2025-04-24T04:40:04+00:00","description":"In this tutorial I will be covering how you can create a custom Divi header. You can place any module in here, which will give you endless design options.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/08\/How-to-create-a-custom-header-in-Divi.jpg","width":720,"height":400,"caption":"How to create a custom Divi header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-custom-divi-header\/#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 Custom Divi Header"}]},{"@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\/11980","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=11980"}],"version-history":[{"count":4,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/11980\/revisions"}],"predecessor-version":[{"id":35704,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/11980\/revisions\/35704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/35188"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=11980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=11980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=11980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}