{"id":1540,"date":"2021-09-05T12:00:50","date_gmt":"2021-09-05T12:00:50","guid":{"rendered":"https:\/\/learnhowwp.com\/?p=1540"},"modified":"2021-09-06T08:52:40","modified_gmt":"2021-09-06T08:52:40","slug":"divi-header-fixed-mobile","status":"publish","type":"post","link":"https:\/\/learnhowwp.com\/divi-header-fixed-mobile\/","title":{"rendered":"How to Make Header Fixed on Mobile in Divi Theme"},"content":{"rendered":"\n<p>Do you want to make the header Fixed on Mobile in Divi theme? <\/p>\n\n\n\n<p>In this article you will find step by step by step instructions to make the mobile header fixed in Divi theme.<\/p>\n\n\n\n<p>Before you read further it is important to understand that the code will only work for the default header. The code will not work for a header built with Divi Theme Builder. If you have built your header using Theme Builder then you should be using <a href=\"https:\/\/www.elegantthemes.com\/blog\/theme-releases\/divi-sticky-options\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Sticky Feature<\/a> to make your menu sticky.<\/p>\n\n\n\n<p>The problem is that the mobile header and menu in the Divi theme is not fixed or sticky by default. Even when you are using fixed header for desktop the mobile menu still does not become sticky when you scroll down the page.<\/p>\n\n\n\n<p>There are no options in the Divi theme to make the mobile menu sticky. <\/p>\n\n\n\n<p>However it can be made sticky with a Snippet of CSS Code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add CSS Code to Make Mobile Header Fixed<\/h2>\n\n\n\n<p>To make the mobile header sticky you have to add the code below to your website.<\/p>\n\n\n\n<p> Go to your\u00a0<strong>WordPress Dashboard > Divi > Theme Options > Custom CSS<\/strong>\u00a0and then add the following CSS code.  <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.et_fixed_nav #main-header {\n    position: fixed;\n}\n<\/pre><\/div>\n\n\n<p>If you are not sure where to add the CSS Code then please check the screenshot below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"408\" src=\"https:\/\/learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png\" alt=\"Divi Theme Options Custom CSS\" class=\"wp-image-211\"\/><\/figure><\/div>\n\n\n\n<p>Once you have added the code in the Divi Theme Options then the mobile header should become fixed.<\/p>\n\n\n\n<p>It will be fixed to the top as you scroll down the page.<\/p>\n\n\n\n<p>Leave a comment below if you have any questions. Don\u2019t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.<\/p>\n\n\n\n<p>Here are some more Divi tutorials that you can check next.<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-a8bdb21a-6324-405a-9b4a-e90bd7f3b3de\"><li><a href=\"https:\/\/learnhowwp.com\/divi-cart-icon-number-price-theme-builder\/\">Add Cart Icon With Item Count and Price In Theme Builder<\/a><\/li><li><a href=\"https:\/\/learnhowwp.com\/divi-arrow-color-gallery-module\/\">How to Change Arrow Color in Gallery Module Divi Theme<\/a><\/li><li><a href=\"https:\/\/learnhowwp.com\/divi-menu-module-vertical\/\">How to Create a Vertical Menu with Divi Menu Module<\/a><\/li><\/ul>\n\n\n\n<p>You can find a complete list of all the help articles related to Divi on the&nbsp;<a href=\"https:\/\/learnhowwp.com\/divi-tutorials\/\">Divi Tutorials<\/a>&nbsp;page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to make the header Fixed on Mobile in Divi theme? In this article you will find step by step by step instructions to make the mobile header fixed in Divi theme. Before you read further it is important to understand that the code will only work for the default header. The code [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[8,7],"tags":[],"class_list":["post-1540","post","type-post","status-publish","format-standard","hentry","category-blog","category-divi-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress<\/title>\n<meta name=\"description\" content=\"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.\" \/>\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.learnhowwp.com\/divi-header-fixed-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress\" \/>\n<meta property=\"og:description\" content=\"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnHowWordPress\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-05T12:00:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-06T08:52:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png\" \/>\n<meta name=\"author\" content=\"learnhowwp.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"learnhowwp.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/\"},\"author\":{\"name\":\"learnhowwp.com\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/#\\\/schema\\\/person\\\/12f506c7740d6582e4ab1ca083e5992f\"},\"headline\":\"How to Make Header Fixed on Mobile in Divi Theme\",\"datePublished\":\"2021-09-05T12:00:50+00:00\",\"dateModified\":\"2021-09-06T08:52:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/\"},\"wordCount\":343,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnhowwp.com\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/Divi-Theme-Options-Custom-CSS.png\",\"articleSection\":[\"Blog\",\"Divi Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/\",\"url\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/\",\"name\":\"How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/learnhowwp.com\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/Divi-Theme-Options-Custom-CSS.png\",\"datePublished\":\"2021-09-05T12:00:50+00:00\",\"dateModified\":\"2021-09-06T08:52:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/#\\\/schema\\\/person\\\/12f506c7740d6582e4ab1ca083e5992f\"},\"description\":\"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#primaryimage\",\"url\":\"https:\\\/\\\/learnhowwp.com\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/Divi-Theme-Options-Custom-CSS.png\",\"contentUrl\":\"https:\\\/\\\/learnhowwp.com\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/Divi-Theme-Options-Custom-CSS.png\",\"width\":800,\"height\":408,\"caption\":\"Divi Theme Options Custom CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/divi-header-fixed-mobile\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.learnhowwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make Header Fixed on Mobile in Divi Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/#website\",\"url\":\"https:\\\/\\\/www.learnhowwp.com\\\/\",\"name\":\"LearnHowWordPress\",\"description\":\"WordPress Tutorials Tips &amp; Tricks\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.learnhowwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.learnhowwp.com\\\/#\\\/schema\\\/person\\\/12f506c7740d6582e4ab1ca083e5992f\",\"name\":\"learnhowwp.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g\",\"caption\":\"learnhowwp.com\"},\"url\":\"https:\\\/\\\/learnhowwp.com\\\/author\\\/learnhowwp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress","description":"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.","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.learnhowwp.com\/divi-header-fixed-mobile\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress","og_description":"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.","og_url":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/","og_site_name":"LearnHowWordPress","article_published_time":"2021-09-05T12:00:50+00:00","article_modified_time":"2021-09-06T08:52:40+00:00","og_image":[{"url":"https:\/\/www.learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png","type":"","width":"","height":""}],"author":"learnhowwp.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"learnhowwp.com","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#article","isPartOf":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/"},"author":{"name":"learnhowwp.com","@id":"https:\/\/www.learnhowwp.com\/#\/schema\/person\/12f506c7740d6582e4ab1ca083e5992f"},"headline":"How to Make Header Fixed on Mobile in Divi Theme","datePublished":"2021-09-05T12:00:50+00:00","dateModified":"2021-09-06T08:52:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/"},"wordCount":343,"commentCount":0,"image":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png","articleSection":["Blog","Divi Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/","url":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/","name":"How to Make Header Fixed on Mobile in Divi Theme - LearnHowWordPress","isPartOf":{"@id":"https:\/\/www.learnhowwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#primaryimage"},"image":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png","datePublished":"2021-09-05T12:00:50+00:00","dateModified":"2021-09-06T08:52:40+00:00","author":{"@id":"https:\/\/www.learnhowwp.com\/#\/schema\/person\/12f506c7740d6582e4ab1ca083e5992f"},"description":"In this article you will find step by step instructions and CSS code to make the header fixed on mobile phones in the Divi theme.","breadcrumb":{"@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#primaryimage","url":"https:\/\/learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png","contentUrl":"https:\/\/learnhowwp.com\/wp-content\/uploads\/2020\/02\/Divi-Theme-Options-Custom-CSS.png","width":800,"height":408,"caption":"Divi Theme Options Custom CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.learnhowwp.com\/divi-header-fixed-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.learnhowwp.com\/"},{"@type":"ListItem","position":2,"name":"How to Make Header Fixed on Mobile in Divi Theme"}]},{"@type":"WebSite","@id":"https:\/\/www.learnhowwp.com\/#website","url":"https:\/\/www.learnhowwp.com\/","name":"LearnHowWordPress","description":"WordPress Tutorials Tips &amp; Tricks","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.learnhowwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.learnhowwp.com\/#\/schema\/person\/12f506c7740d6582e4ab1ca083e5992f","name":"learnhowwp.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a97fefb4497e1aa13fc8e4f5cb95e2f3a1270a69748dd74e85cecaab07cbdaa2?s=96&d=mm&r=g","caption":"learnhowwp.com"},"url":"https:\/\/learnhowwp.com\/author\/learnhowwp\/"}]}},"_links":{"self":[{"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/posts\/1540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/comments?post=1540"}],"version-history":[{"count":2,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/posts\/1540\/revisions"}],"predecessor-version":[{"id":1542,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/posts\/1540\/revisions\/1542"}],"wp:attachment":[{"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/media?parent=1540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/categories?post=1540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnhowwp.com\/wp-json\/wp\/v2\/tags?post=1540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}