{"id":8634,"date":"2023-03-13T23:24:50","date_gmt":"2023-03-13T23:24:50","guid":{"rendered":"https:\/\/mauricemuteti.info\/?p=8634"},"modified":"2023-03-13T23:24:50","modified_gmt":"2023-03-13T23:24:50","slug":"revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress","status":"publish","type":"post","link":"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/","title":{"rendered":"&#8220;Revamp Your Website with This Jaw-Dropping Trick for Creating a Sticky Header in WordPress&#8221;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_49 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-678759f0eda13\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-678759f0eda13\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#How_to_Add_a_Sticky_Header_to_Your_WordPress_Website\" title=\"How to Add a Sticky Header to Your WordPress Website\">How to Add a Sticky Header to Your WordPress Website<\/a><ul class='ez-toc-list-level-2'><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Method_1_Using_a_Plugin\" title=\"Method 1: Using a Plugin\">Method 1: Using a Plugin<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_1_%E2%80%93_Installing_the_Plugin\" title=\"Step 1 &#8211; Installing the Plugin\">Step 1 &#8211; Installing the Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_2_%E2%80%93_Configuring_the_Plugin\" title=\"Step 2 &#8211; Configuring the Plugin\">Step 2 &#8211; Configuring the Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_3_%E2%80%93_Customizing_the_Sticky_Header\" title=\"Step 3 &#8211; Customizing the Sticky Header\">Step 3 &#8211; Customizing the Sticky Header<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Method_2_Using_Custom_Code\" title=\"Method 2: Using Custom Code\">Method 2: Using Custom Code<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_1_%E2%80%93_Creating_a_Child_Theme\" title=\"Step 1 &#8211; Creating a Child Theme\">Step 1 &#8211; Creating a Child Theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_2_%E2%80%93_Adding_the_Sticky_Header_Code\" title=\"Step 2 &#8211; Adding the Sticky Header Code\">Step 2 &#8211; Adding the Sticky Header Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Step_3_%E2%80%93_Adding_Custom_CSS\" title=\"Step 3 &#8211; Adding Custom CSS\">Step 3 &#8211; Adding Custom CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/mauricemuteti.info\/revamp-your-website-with-this-jaw-dropping-trick-for-creating-a-sticky-header-in-wordpress\/#Final_Thoughts\" title=\"Final Thoughts\">Final Thoughts<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"How_to_Add_a_Sticky_Header_to_Your_WordPress_Website\"><\/span>How to Add a Sticky Header to Your WordPress Website<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>As a website owner, you want your visitors to have a great user experience. One way to achieve this is by having a sticky header that stays fixed at the top of the page even when the user scrolls down, making navigation easier. If you have a WordPress website, adding a sticky header is not difficult, and there are two ways to do it.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_a_Plugin\"><\/span>Method 1: Using a Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress has various plugins that can help add a sticky header to your website. One of these is called &#8220;Sticky Menu (or Anything!) on Scroll.&#8221; Follow these steps:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_%E2%80%93_Installing_the_Plugin\"><\/span>Step 1 &#8211; Installing the Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Go to your WordPress dashboard and click on Plugins > Add New<\/li>\n<li>Type &#8220;Sticky Menu (or Anything!) on Scroll&#8221; in the search bar and press enter<\/li>\n<li>Click on the &#8220;Install Now&#8221; button next to the plugin and wait for the installation to complete<\/li>\n<li>Once the installation is complete, click on the &#8220;Activate&#8221; button<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_%E2%80%93_Configuring_the_Plugin\"><\/span>Step 2 &#8211; Configuring the Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Go to the WordPress dashboard and click on Appearance > Customize<\/li>\n<li>Click on the &#8220;Sticky Menu&#8221; option<\/li>\n<li>Enable the sticky menu by sliding the toggle button to the right<\/li>\n<li>Choose the header you want to make sticky<\/li>\n<li>Click on &#8220;Publish&#8221; to save the changes<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_%E2%80%93_Customizing_the_Sticky_Header\"><\/span>Step 3 &#8211; Customizing the Sticky Header<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Click on &#8220;Additional CSS&#8221; on the Appearance > Customize screen<\/li>\n<li>Add your custom CSS code to style the header as per your needs and preview the changes<\/li>\n<li>Once done, click on the &#8220;Publish&#8221; button to save the changes<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Using_Custom_Code\"><\/span>Method 2: Using Custom Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you don&#8217;t want to use a plugin, you can implement a sticky header in WordPress using custom code. Here&#8217;s how:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_%E2%80%93_Creating_a_Child_Theme\"><\/span>Step 1 &#8211; Creating a Child Theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>If you are not already using a child theme, create one by going to Appearance > Themes, choosing a theme you like, and creating a child theme from it<\/li>\n<li>You can now customize your child theme without losing your changes when you update the parent theme<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_%E2%80%93_Adding_the_Sticky_Header_Code\"><\/span>Step 2 &#8211; Adding the Sticky Header Code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>From your WordPress dashboard, go to Appearance > Theme Editor, select your child theme, and click on functions.php to open it<\/li>\n<li>Add the following code at the top of the file: add_action(&#8216;wp_head&#8217;, &#8216;custom_sticky_header&#8217;)<\/li>\n<li>Create a new file called sticky-header.php and add the custom_sticky_header function code to it (see the full code in the article)<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_%E2%80%93_Adding_Custom_CSS\"><\/span>Step 3 &#8211; Adding Custom CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>From your WordPress dashboard, go to Appearance > Customize and click on the &#8220;Additional CSS&#8221; option<\/li>\n<li>Add the CSS code to style the sticky header (see the full code in the article)<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Adding a sticky header to your WordPress website can improve user experience, and you can choose either the plugin or custom code method to achieve it. Ensure you customize the header to fit your website design and brand. With these steps, you can achieve a sticky header with ease.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to Add a Sticky Header to Your WordPress Website As a website owner, you want your visitors to have a great user experience. One&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3287],"tags":[],"jetpack_featured_media_url":"https:\/\/mauricemuteti.info\/wp-content\/uploads\/2023\/03\/WORDPRESS-ULTIMATE-GUIDE-How-To-step-by-step-Tutorial.png","_links":{"self":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/8634"}],"collection":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/comments?post=8634"}],"version-history":[{"count":0,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/posts\/8634\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media\/7209"}],"wp:attachment":[{"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/media?parent=8634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/categories?post=8634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mauricemuteti.info\/wp-json\/wp\/v2\/tags?post=8634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}