Disable sticky header on mobile devices when the responsive layout option is disabled

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

When you disable the responsive layout option on mobile devices, their viewport is set to the standard non-zoomed view and the sticky header functionality is applied to them. If you would like to disable the sticky header on the mobile devices, but still keep it enabled on desktop computers, you can accomplish this by inserting the following CSS into the Mineral Options -> Styles -> Additional Styles section:

.mobile.fixed-header #header {
position: relative;
top: 0;
z-index: 500;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mobile.admin-bar.fixed-header #header {
top: 0;
}
.mobile.fixed-header .page-wrapper {
-webkit-transition: padding-top 0s ease;
-moz-transition: padding-top 0s ease;
-ms-transition: padding-top 0s ease;
-o-transition: padding-top 0s ease;
transition: padding-top 0s ease;
padding-top: 0px !important;
}
.mobile.fixed-header-scroll #header {
padding: 7px 0;
}
.mobile.fixed-header-scroll #header {
padding: 20px 0;
}
.mobile.fixed-header-scroll #logo-container {
max-width: 70%;
}