{"id":14685,"date":"2018-09-28T11:50:01","date_gmt":"2018-09-28T11:50:01","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=14685"},"modified":"2021-12-22T08:34:04","modified_gmt":"2021-12-22T08:34:04","slug":"sticky-mobile-header","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/knowledge-base\/sticky-mobile-header","title":{"rendered":"Sticky mobile header"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1538135506343{padding-left: 30px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][vc_column_text]In order to have the sticky mobile header you can use following\u00a0CSS code:<br \/>\n<code><br \/>\n@media only screen and (max-width: 1100px) {#header-container:not(.small) {<br \/>\nposition: fixed;<br \/>\n}}<br \/>\n@media only screen and (max-width: 799px){#header-container:not(.small) {<br \/>\nposition: fixed;<br \/>\n}}<br \/>\n@media only screen and (max-width: 480px) {#header-container:not(.small) {<br \/>\nposition: fixed;<br \/>\n}}<br \/>\n@media only screen and (max-width: 799px){#header-container.small {<br \/>\ndisplay: block;<br \/>\n}}<br \/>\n@media only screen and (max-width: 480px) {#header-container.small {<br \/>\ndisplay: block;<br \/>\n}}<br \/>\n<\/code><\/p>\n<p>Add the code to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Note! the solution is not suitable for &#8220;Side by side&#8221; and &#8220;One page scroll&#8221; Page templates.\u00a0<\/strong>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column css=&#8221;.vc_custom_1538135506343{padding-left: 30px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][vc_column_text]In order to have the sticky mobile header you can use following\u00a0CSS code: @media only screen and (max-width: 1100px) {#header-container:not(.small) { position: fixed; }} @media<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[216,14,102,103],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14685"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=14685"}],"version-history":[{"count":4,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14685\/revisions"}],"predecessor-version":[{"id":15352,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14685\/revisions\/15352"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=14685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=14685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=14685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}