Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Initiate mobile menu at a smaller width than 768px. Replace the 600px with whatever you like.
@media (max-width: 769px) {
.menu-toggle,
.main-navigation.toggled .main-nav > ul {
display: none;
}
.main-navigation ul li.sfHover > ul {
display: block;
}
.sub-menu.toggled-on,
.children.toggled-on {
display: none !important;
opacity: 0 !important;
}
.dropdown-menu-toggle:before {
content: "\f107" !important;
}
.sfHover > a .dropdown-menu-toggle:before {
content: "\f105" !important;
}
.main-navigation ul {
display: block;
}
.nav-float-right .main-navigation {
float: right;
margin: 0;
}
.nav-float-left .main-navigation {
float: left;
margin-bottom:0px;
}
.nav-float-left .site-branding {
float: right;
}
.nav-float-left .site-logo {
float: left;
}
.navigation-search {
bottom: auto;
top: 0;
}
.mobile-bar-items {
display: none;
}
.main-navigation .menu li.search-item {
display: block !important;
}
.main-nav .sf-menu > li {
float: left;
clear: none;
}
.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
float: none;
display: inline-block;
*display: inline;
*zoom:1;
}
.main-navigation .main-nav ul ul {
position: absolute;
top: 0;
left: 100%;
width: auto;
}
.menu-item-has-children .dropdown-menu-toggle {
float: none;
}
.navigation-search,
.navigation-search input {
width: 100%;
max-width: 100%;
}
.sf-menu > li.menu-item-float-right {
float: right !important;
display: block;
}
}
@media (max-width: 600px) {
.menu-toggle,
.main-navigation.toggled .main-nav > ul {
display: block;
}
.main-navigation ul li.sfHover > ul {
display: none;
}
button.menu-toggle {
background-color: transparent;
width: 100%;
border: 0;
}
button.menu-toggle:hover,
button.menu-toggle:active,
button.menu-toggle:focus {
background-color: transparent;
border: 0;
outline: 0;
}
.sub-menu.toggled-on,
.children.toggled-on {
display: block !important;
opacity: 1 !important;
}
.dropdown-menu-toggle:before {
content: "\f107" !important;
}
.sfHover > a .dropdown-menu-toggle:before {
content: "\f106" !important;
}
.main-navigation ul {
display: none;
}
.nav-float-right .main-navigation,
.nav-float-left .main-navigation {
float: none;
margin-bottom:20px;
}
.nav-float-left .site-branding,
.nav-float-left .site-logo {
float: none;
}
.navigation-search {
bottom: auto;
top: 0;
}
.mobile-bar-items {
display: block;
position: absolute;
right: 0;
top: 0;
z-index: 21;
list-style-type: none;
}
.mobile-bar-items a {
display: inline-block;
}
.main-navigation .menu li.search-item {
display: none !important;
}
li.search-item a {
padding-left: 20px;
padding-right: 20px;
}
.menu-toggle {
text-align: center;
}
.nav-search-enabled .main-navigation .menu-toggle {
text-align: left;
}
.main-nav .sf-menu > li {
float: none;
clear: both;
}
.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
display: block;
margin: 0;
text-align: left;
}
.main-navigation .main-nav ul ul {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.menu-item-has-children .dropdown-menu-toggle {
float: right;
}
.main-navigation {
text-align:left;
}
.navigation-search,
.navigation-search input {
width: 100%;
max-width: 100%;
}
.sf-menu > li.menu-item-float-right {
float: none !important;
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment