Skip to content

Instantly share code, notes, and snippets.

@arelthia
Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arelthia/4e20389ec06d6bb47b39 to your computer and use it in GitHub Desktop.
Save arelthia/4e20389ec06d6bb47b39 to your computer and use it in GitHub Desktop.
Change the mobile menu into a mobile friendly menu.
jQuery(document).ready(function() {
jQuery(".builder-module-navigation .menu").addClass("mobile-menu-hidden");
jQuery(".builder-module-navigation").addClass("mobile");
jQuery(".mobile-menu-hidden").before('<div class="mobile-menu">&#8801; Menu</div>');
jQuery(".mobile-menu").click(function(){
jQuery(this).next().slideToggle();
});
jQuery(".mobile.builder-module-navigation li:has(ul)").click(function(){
jQuery(".mobile.builder-module-navigation li ul").hide('fast');
jQuery("ul",this).toggle();
});
});
.mobile-menu{
display: none;
}
@media screen and (max-width:767px) {
/*********************************************
Mobile Menu
*********************************************/
.mobile-menu {
color: #4b9eec;
width: auto;
font-weight: 700;
font-size: 1.5rem;
cursor: pointer;
display: block;
padding: .65em 0;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
text-align: center;
}
.mobile.builder-module-navigation .mobile-menu-hidden {
display: none;
margin-bottom: 1em;
}
.mobile .builder-module-navigation-menu-wrapper {
display: block;
}
.builder-module-navigation-background-wrapper {
padding: 0;
}
.builder-module-outer-wrapper .mobile.builder-module-navigation {
padding: 0;
}
.mobile.builder-module-navigation {
display: block;
line-height: 1;
width: 100%;
}
.mobile.builder-module-navigation ul.menu {
border-bottom: 0;
}
.mobile.builder-module-navigation ul.menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.mobile.builder-module-navigation ul {
display: block;
float: none;
width: 100%;
margin: 0;
padding: 0;
}
.mobile.builder-module-navigation ul * {
margin: 0;
}
.mobile.builder-module-navigation li {
padding: 0;
display: block;
width: 100%;
background-color: rgba(255, 255, 255,.8);
}
.mobile.builder-module-navigation li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
color: #333333;
font-size: 1em;
font-weight: 600;
text-decoration: none;
padding: .5em 1em;
border: 0;
border-bottom: 1px solid #C9C9C9;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.mobile.builder-module-navigation .current_page_item > a,
.mobile.builder-module-navigation .current-cat > a,
.mobile.builder-module-navigation .current-menu-item > a {
color: #252525;
background: #F5F5F5;
}
.mobile.builder-module-navigation li a:hover,
.mobile.builder-module-navigation .current_page_item li a:hover,
.mobile.builder-module-navigation .current-cat li a li a:hover,
.mobile.builder-module-navigation .current-menu-item li a:hover {
color: #252525;
background: #F5F5F5;
}
/* Second Level */
.mobile.builder-module-navigation li ul {
background: #FFFFFF;
border: 0;
width: 100%;
left: 0;
position: relative;
display: none;
}
.mobile.builder-module-navigation li li {
border: 0;
width: 100%;
}
.mobile.builder-module-navigation li li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
float: none;
font-size: 1em;
line-height: 1;
margin: 0;
padding-left: 2em;
}
.mobile.builder-module-navigation li li a:hover,
.mobile.builder-module-navigation li li a.sfhover {
}
.mobile.builder-module-navigation li ul ul {
margin: 0;
}
.mobile.builder-module-navigation li:hover ul,
.mobile.builder-module-navigation li li:hover ul,
.mobile.builder-module-navigation li li li:hover ul,
.mobile.builder-module-navigation li li li li:hover ul,
.mobile.builder-module-navigation li li li li li:hover ul,
.mobile.builder-module-navigation li.sfhover ul,
.mobile.builder-module-navigation li li.sfhover ul,
.mobile.builder-module-navigation li li li.sfhover ul,
.mobile.builder-module-navigation li li li li.sfhover ul,
.mobile.builder-module-navigation li li li li li.sfhover ul {
left: 0;
}
.builder-module-navigation .builder-module-sidebar-outer-wrapper {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment