Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Initiate the mobile header at your desired width. Change 768px to whatever you like.
@media( max-width: 768px ) {
#site-navigation,
#sticky-navigation {
display: none !important;
opacity: 0;
}
#mobile-header {
display: block !important;
opacity: 1;
width: 100% !important;
}
.mobile-header-navigation.is_stuck {
box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
}
.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
display: inline-block;
float: right;
clear: none;
width:auto;
}
#mobile-header .menu {
display: none;
}
.site-header {
display: none;
}
.mobile-header-navigation .mobile-header-logo {
float: left;
display: block;
}
.mobile-header-navigation .mobile-header-logo img {
position: relative;
vertical-align:middle;
padding: 10px;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-float-left .mobile-header-navigation .mobile-header-logo,
.rtl .mobile-header-navigation .mobile-header-logo {
float: right;
}
.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
float: left;
}
.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
position: relative;
float: right;
}
.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
float: left;
}
body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
position: absolute;
right: 0;
top: 0;
}
body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
left: 0;
right: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment