{"id":1162,"date":"2023-08-11T10:01:57","date_gmt":"2023-08-11T10:01:57","guid":{"rendered":"https:\/\/docs.oceanthemes.site\/makaffo\/?p=1162"},"modified":"2024-05-22T04:58:59","modified_gmt":"2024-05-22T04:58:59","slug":"setup-sticky-function-for-container","status":"publish","type":"post","link":"https:\/\/docs.oceanthemes.site\/makaffo\/setup-sticky-function-for-container\/","title":{"rendered":"Setup Sticky function for header"},"content":{"rendered":"\n<p>Step 1:  Go to parent container, setup options: <\/p>\n\n\n\n<p><strong>Direction<\/strong> : <strong>Row &#8211; horizontal<\/strong><\/p>\n\n\n\n<p><strong>Align Items<\/strong> : <strong>Start<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"920\" src=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/1.png\" alt=\"\" class=\"wp-image-1165\" srcset=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/1.png 860w, https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/1-280x300.png 280w, https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/1-768x822.png 768w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure>\n\n\n\n<p>Step 2: Add class &#8220;sticky-header&#8221; to the child container you want to sticky<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"916\" src=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/2.png\" alt=\"\" class=\"wp-image-1174\" srcset=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/2.png 438w, https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2023\/08\/2-143x300.png 143w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/figure>\n\n\n\n<p>Also, in the logo widget and menu widget that you use in the header, there is an option to change the logo and menu color on scroll down.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"828\" src=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/3.png\" alt=\"\" class=\"wp-image-1179\" srcset=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/3.png 390w, https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/3-141x300.png 141w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"840\" src=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/4.png\" alt=\"\" class=\"wp-image-1180\" srcset=\"https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/4.png 517w, https:\/\/docs.oceanthemes.site\/makaffo\/wp-content\/uploads\/sites\/8\/2024\/05\/4-185x300.png 185w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Step 1: Go to parent container, setup options: Direction : Row &#8211; horizontal Align Items : Start Step 2: Add class &#8220;sticky-header&#8221; to the child container you want to sticky Also, in the logo widget and menu widget that you use in the header, there is an option to change the logo and menu color [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1162","post","type-post","status-publish","format-standard","hentry","category-elementor"],"_links":{"self":[{"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/posts\/1162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/comments?post=1162"}],"version-history":[{"count":7,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/posts\/1162\/revisions"}],"predecessor-version":[{"id":1181,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/posts\/1162\/revisions\/1181"}],"wp:attachment":[{"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/media?parent=1162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/categories?post=1162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/makaffo\/wp-json\/wp\/v2\/tags?post=1162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}