{"id":146,"date":"2021-04-06T12:06:06","date_gmt":"2021-04-06T12:06:06","guid":{"rendered":"https:\/\/www.eseotools.com\/blog\/?p=146"},"modified":"2021-04-06T12:06:06","modified_gmt":"2021-04-06T12:06:06","slug":"how-to-make-a-sticky-header-code-vs-plugin","status":"publish","type":"post","link":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/","title":{"rendered":"How to make a sticky header &#8211; code vs plugin"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Sticky elements are slowly but surely becoming a common factor in website design. Most prominently, these are used for headers and menus but can also be used on virtually anything on your site. Since they are a surprisingly useful tool and not just a fad, it&#8217;s important to know what the sticky attribute is, when best to use it, and finally, how you can implement it in your site.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">What does the &#8220;sticky&#8221; designation mean<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Used for easier navigation, you can make elements on your page stick, as we&#8217;ve already explained. Making them stick means that the designated element won&#8217;t move from their original position on the page once you scroll up or down but instead stay in place. If you&#8217;ve ever used the &#8220;freeze panes&#8221; option in Excel, you&#8217;ll know exactly what we&#8217;re talking about since it is based on a very similar principle.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">What elements benefit most from being &#8220;sticky.&#8221;<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">All of us have encountered these elements, so there is no real mystery on where to use the sticky attribute. These would be the ones you want your visitors to have access to every moment they&#8217;re browsing your site. As they&#8217;re always on the screen, it&#8217;s important to limit the sticky elements on the borders \u2013 usually the upper border for navigation (sticky header and sticky menu) or the bottom border for advertising or support (chat and contact information). Although not unheard of but still exceedingly rare, side borders (left and right) can also be used for either of the aforementioned functions.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">The benefits of sticky elements<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Even though it might sound contradictory (because they use up space on the screen), sticky elements actually save you space. Sure, the space reserved for content on your page is reduced; however, you don&#8217;t have to waste any of it on navigation. That means that the &#8220;body&#8221; of every page is reserved exclusively for your content. The space you save is and navigational hassle you avoid is even more prominent on phones and tablets that have smaller screens and overall fewer navigation capabilities. Having an ever-present section that can be used to move the switch from page to page instead of using the &#8220;back&#8221; button immensely enhances the browsing experience.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">How to create\/implement a sticky element<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">There are two main ways you can create sticky elements. You could do it manually through code, or you could use one of the numerous plugins designed to simplify the process. For our purposes, we&#8217;ll focus on the sticky header, by far the most common sticky element on pages.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Manual sticky header<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">To create a sticky header in WordPress manually, you&#8217;ll need to use CSS code. Putting it simply, CSS is code we add to the element (in this case, header) that alters its properties. This can be used in a variety of ways, ranging from the simplest, like applying a custom color, to the more advanced, like adding the targeted sticky attribute we&#8217;ve been talking about.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To access the console that lets you make these changes go to the appearance section find on the left-hand side of your dashboard. Once there, choose &#8220;customize&#8221; and click on &#8220;additional CSS&#8221;. Now you&#8217;ll be able to input the code that makes your header sticky:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">#website-navigation {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">background:#fff;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">height:60px;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">z-index:170;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">margin:0 auto;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">border-bottom:1px solid #dadada;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">width:100%;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">position:fixed;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">top:0;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">left:0;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">right:0;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">text-align: center;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By the time you&#8217;re done, the code should look like the one we&#8217;ve listed above. One thing that&#8217;s specific to each site is the first line \u2013 you&#8217;ll need to replace #website-navigation with your navigation header&#8217;s CSS class or ID.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you&#8217;ve finished, simply click on publish, refresh your site, and marvel at your brand-new sticky header.<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Sticky header by the plugin<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">If you don&#8217;t have the time, knowledge, or inclination to dive into coding, there is always the option to use a plugin. One of the <a href=\"https:\/\/www.eseotools.com\/blog\/best-seo-terms-for-learners\/\" target=\"_blank\" rel=\"noopener\">best<\/a> we&#8217;ve found that will cover everything you need to create sticky elements and is, at the same time, very easy to use is WP Sticky. Right off the bat, we&#8217;ll point out that there is absolutely no coding needed; everything is done through the very user-friendly UI. The whole process is divided into three parts\/sections \u2013 basic, visual, and advanced. Don&#8217;t let this fool you, as the steps are intuitive enough, and you won&#8217;t get befuddled along the way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first order of business is adding a sticky element. This is easily done by simply clicking the big yellow button aptly named &#8220;Add new sticky element&#8221;. You can add as many sticky elements as you want, so be sure to name them in a way you can follow easily. Since we&#8217;re showing how to create a <\/span><a href=\"https:\/\/wpsticky.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">sticky header<\/span><\/a><span style=\"font-weight: 400;\">, we&#8217;ll continue focusing on that.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-148 size-full\" src=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/sticky-header.jpg\" alt=\"sticky header\" width=\"607\" height=\"150\" srcset=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/sticky-header.jpg 607w, https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/sticky-header-300x74.jpg 300w\" sizes=\"auto, (max-width: 607px) 100vw, 607px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now comes the fun part. Namely, adding elements to the \u201csticky pile\u201d has never been easier. Simply add the nickname of your element (in this case, header) and choose the element. This choosing is the fun part. Namely, you get a preview of your page from the frontend and choose the element by just clicking on it. The chosen element is then converted to a sticky element \u2013 they couldn\u2019t have made it easier if they tried.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that you\u2019ve made your sticky header, it\u2019s time to customize it. Through the visual section, you can choose the position (if it\u2019s a header, it fits naturally on top), the spacing between the element and the rest of the page, and take the admin toolbar into account.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-149 size-full\" src=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/admin-toolbar-into-account.jpg\" alt=\"\" width=\"609\" height=\"163\" srcset=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/admin-toolbar-into-account.jpg 609w, https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/admin-toolbar-into-account-300x80.jpg 300w\" sizes=\"auto, (max-width: 609px) 100vw, 609px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Furthermore, because there are so many browsing options available nowadays, you can make rules about the sticky element based on its displayed screen. Present are four default sizes to choose from that cover the basics \u2013 phone, tablet, and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Desktop\" target=\"_blank\" rel=\"noopener\">desktop<\/a>. This feature is crucial in making your site responsive, something you simply can\u2019t go without unless you invest in an app for phones that will accompany your site for desktop browsers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-150 size-full\" src=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/desktop-browsers.jpg\" alt=\"\" width=\"633\" height=\"283\" srcset=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/desktop-browsers.jpg 633w, https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/desktop-browsers-300x134.jpg 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If you have many elements on a page, it\u2019s important to keep your sticky header literally on top of them. This is usually the case by default; however, if you find that your header is obscured, just manually adjust the Z-index (if the number is higher, the header will always be on top). Additionally, you can choose to implement effects to your header, change the opacity and scroll range.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-151 size-full\" src=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/scroll-range.jpg\" alt=\"\" width=\"631\" height=\"211\" srcset=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/scroll-range.jpg 631w, https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/scroll-range-300x100.jpg 300w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Finally, the advanced settings center mainly around exclusion with the addition of setting up an optional push-up element. Here you can expand upon the screen size your header will be sticky beyond the default sizes and make rules on which pages, posts, etc. the header will not be sticky. The whole process is as simple as just adding the numbers and categories to a few designated fields.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-152 size-full\" src=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/designated-fields.jpg\" alt=\"\" width=\"608\" height=\"322\" srcset=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/designated-fields.jpg 608w, https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/designated-fields-300x159.jpg 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">At the end of the process, it\u2019s important to emphasize that while it may seem there are more steps to cover than manually writing a dozen lines of CSS code, it\u2019s really a much simpler endeavor. The code is simple for those who know what they\u2019re doing, and if you don\u2019t, you may find yourself losing hours on other people\u2019s code and YouTube tutorials. WP Sticky makes it so that you have to select a header on your page by clicking on it, check a couple of boxes, and fill in a couple of fields, essentially something any of us can do without much fuss.\u00a0<\/span><\/p>\n<h1><span style=\"font-weight: 400;\">Summary<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">There really isn\u2019t much debate about which of the methods is better \u2013 it all depends on your coding skills. If you\u2019re well versed with HTML and CSS coding, it\u2019s a safe bet you\u2019ll be able to churn out a functioning sticky header in no time. On the other hand, if you\u2019re new to web management and rely on plugins to replace the required coding, then using WP Sticky is undoubtedly the better solution for you.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sticky elements are slowly but surely becoming a common factor in website design. Most prominently, these are used for headers and menus but can also&hellip;<\/p>\n","protected":false},"author":3,"featured_media":147,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to make a sticky header - code vs plugin - eSEOtools<\/title>\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.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make a sticky header - code vs plugin - eSEOtools\" \/>\n<meta property=\"og:description\" content=\"Sticky elements are slowly but surely becoming a common factor in website design. Most prominently, these are used for headers and menus but can also&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"eSEOtools\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-06T12:06:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"874\" \/>\n\t<meta property=\"og:image:height\" content=\"442\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"mindmingles\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mindmingles\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/\"},\"author\":{\"name\":\"mindmingles\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#\\\/schema\\\/person\\\/f4e339eac3447700fc1f43250d337cc6\"},\"headline\":\"How to make a sticky header &#8211; code vs plugin\",\"datePublished\":\"2021-04-06T12:06:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/\"},\"wordCount\":1351,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-make-a-sticky-header-code-vs-plugin.jpg\",\"articleSection\":[\"Tech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/\",\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/\",\"name\":\"How to make a sticky header - code vs plugin - eSEOtools\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-make-a-sticky-header-code-vs-plugin.jpg\",\"datePublished\":\"2021-04-06T12:06:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-make-a-sticky-header-code-vs-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-make-a-sticky-header-code-vs-plugin.jpg\",\"width\":874,\"height\":442,\"caption\":\"How to make a sticky header - code vs plugin\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/how-to-make-a-sticky-header-code-vs-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make a sticky header &#8211; code vs plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/\",\"name\":\"eSEOtools\",\"description\":\"Digital Marketing and SEO Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#organization\",\"name\":\"eSEOtools\",\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/eSEOtools-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/eSEOtools-logo.png\",\"width\":220,\"height\":60,\"caption\":\"eSEOtools\"},\"image\":{\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/#\\\/schema\\\/person\\\/f4e339eac3447700fc1f43250d337cc6\",\"name\":\"mindmingles\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g\",\"caption\":\"mindmingles\"},\"url\":\"https:\\\/\\\/www.eseotools.com\\\/blog\\\/author\\\/mindmingles\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make a sticky header - code vs plugin - eSEOtools","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.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/","og_locale":"en_US","og_type":"article","og_title":"How to make a sticky header - code vs plugin - eSEOtools","og_description":"Sticky elements are slowly but surely becoming a common factor in website design. Most prominently, these are used for headers and menus but can also&hellip;","og_url":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/","og_site_name":"eSEOtools","article_published_time":"2021-04-06T12:06:06+00:00","og_image":[{"width":874,"height":442,"url":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg","type":"image\/jpeg"}],"author":"mindmingles","twitter_card":"summary_large_image","twitter_misc":{"Written by":"mindmingles","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#article","isPartOf":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/"},"author":{"name":"mindmingles","@id":"https:\/\/www.eseotools.com\/blog\/#\/schema\/person\/f4e339eac3447700fc1f43250d337cc6"},"headline":"How to make a sticky header &#8211; code vs plugin","datePublished":"2021-04-06T12:06:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/"},"wordCount":1351,"commentCount":0,"publisher":{"@id":"https:\/\/www.eseotools.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg","articleSection":["Tech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/","url":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/","name":"How to make a sticky header - code vs plugin - eSEOtools","isPartOf":{"@id":"https:\/\/www.eseotools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg","datePublished":"2021-04-06T12:06:06+00:00","breadcrumb":{"@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#primaryimage","url":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg","contentUrl":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2021\/04\/how-to-make-a-sticky-header-code-vs-plugin.jpg","width":874,"height":442,"caption":"How to make a sticky header - code vs plugin"},{"@type":"BreadcrumbList","@id":"https:\/\/www.eseotools.com\/blog\/how-to-make-a-sticky-header-code-vs-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eseotools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to make a sticky header &#8211; code vs plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.eseotools.com\/blog\/#website","url":"https:\/\/www.eseotools.com\/blog\/","name":"eSEOtools","description":"Digital Marketing and SEO Blog","publisher":{"@id":"https:\/\/www.eseotools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eseotools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.eseotools.com\/blog\/#organization","name":"eSEOtools","url":"https:\/\/www.eseotools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eseotools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2020\/04\/eSEOtools-logo.png","contentUrl":"https:\/\/www.eseotools.com\/blog\/wp-content\/uploads\/2020\/04\/eSEOtools-logo.png","width":220,"height":60,"caption":"eSEOtools"},"image":{"@id":"https:\/\/www.eseotools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.eseotools.com\/blog\/#\/schema\/person\/f4e339eac3447700fc1f43250d337cc6","name":"mindmingles","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/63ecc356a440ecdd4c3dc84aa04977c53dd3d7be5b1e9d501cafd9d6920cabab?s=96&d=mm&r=g","caption":"mindmingles"},"url":"https:\/\/www.eseotools.com\/blog\/author\/mindmingles\/"}]}},"_links":{"self":[{"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/posts\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":0,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/media\/147"}],"wp:attachment":[{"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eseotools.com\/blog\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}