{"id":18196,"date":"2021-05-22T10:31:24","date_gmt":"2021-05-22T10:31:24","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=18196"},"modified":"2021-06-04T10:40:51","modified_gmt":"2021-06-04T10:40:51","slug":"how-to-add-smart-sticky-header-for-amp-support-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-smart-sticky-header-for-amp-support-in-amp\/","title":{"rendered":"How to add Smart Sticky Header in AMP"},"content":{"rendered":"\n<p>Add a simple sticky header to your WordPress with Smart Sticky Header for AMP on Scroll. This will float off the screen when the user scrolls down and floats back when users scrolls up. This AMP compatibility addon adds the Support in AMP with just one click!<\/p>\n\n\n\n<p>First, you need to purchase and install&nbsp;the&nbsp;<a href=\"https:\/\/ampforwp.com\/addons\/smart-sticky-header-for-amp\/\">Smart Sticky Header for AMP <\/a>plugin.<\/p>\n\n\n\n<p>It\u2019s pretty easy for you to setup because it works out of the box.<\/p>\n\n\n\n<p><strong>Here are a few simple steps to place&nbsp;Smart Sticky Header for AMP<\/strong><\/p>\n\n\n\n<p>After downloading&nbsp;<strong>Smart Sticky Header for AMP<\/strong>&nbsp;on your Desktop follows the below-given steps.<\/p>\n\n\n\n<p><strong>Step 1 \u2013<\/strong>&nbsp;Go to&nbsp;<strong>Plugins<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New<\/strong>&nbsp;then click on&nbsp;<strong>Upload Plugin<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"755\" height=\"382\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png\" alt=\"\" class=\"wp-image-16549\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7.png 755w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-300x152.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/6-7-100x51.png 100w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/figure>\n\n\n\n<p><strong>Step 2 \u2013<\/strong>&nbsp;&nbsp;<strong>Smart Sticky Header for AMP<\/strong>&nbsp;is a Paid Plugin Extension. You won\u2019t find that extension in the WordPress Plugin directory. So you have to upload this plugin after purchasing.<\/p>\n\n\n\n<ul><li>Click on&nbsp;<strong>Upload Plugin<\/strong><\/li><li>then choose the \u201c&nbsp;<strong>Smart Sticky Header for AMP<\/strong>\u201d Extension from which you already downloaded after purchase.<\/li><li>After that, click on&nbsp;<strong>Install Now<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"305\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-1024x305.png\" alt=\"\" class=\"wp-image-18197\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-1024x305.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-300x89.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-768x229.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13-100x30.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/13.png 1070w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3 \u2013<\/strong>&nbsp;After Uploading the plugin, Click on&nbsp;<strong>Activate Plugin<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"673\" height=\"242\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14.png\" alt=\"\" class=\"wp-image-18198\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14.png 673w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14-300x108.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14-50x18.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14-60x22.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/14-100x36.png 100w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<p><strong>Step 4 \u2013\u00a0<\/strong>After installing you will find this option in\u00a0<strong>WordPress Dashboard<\/strong>\u00a0->\u00a0<strong>AMP Option Panel<\/strong>\u00a0-> Navigate to\u00a0<strong>AMP Smart Sticky\u00a0<\/strong>->\u00a0<strong>Settings<\/strong> -> Enable <strong>AMP Smart Sticky <\/strong>option and then click on the &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"357\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-1024x357.png\" alt=\"\" class=\"wp-image-18238\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-1024x357.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-300x105.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-768x268.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-60x21.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8-100x35.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/06\/8.png 1222w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"the-output-of-the-forminator-for-amp\">The Output of the Smart Sticky Header for AMP<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"494\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-1024x494.png\" alt=\"\" class=\"wp-image-18202\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-1024x494.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-768x370.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/05\/1-1.png 1367w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Add a simple sticky header to your WordPress with Smart Sticky Header for AMP on Scroll. This will float off the screen when the user scrolls down and floats back when users scrolls up. This AMP compatibility addon adds the Support in AMP with just one click! First, you need&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[197],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18196"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=18196"}],"version-history":[{"count":5,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18196\/revisions"}],"predecessor-version":[{"id":18239,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18196\/revisions\/18239"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=18196"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=18196"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=18196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}