New Mobile Menu | Add Javascript in footer and change phone number then choose which email link to use | Add CSS in small.css and replace the mobile menu css
<script>
$(window).bind("load", function() {
var phoneNumber = '0400 000 000';
$('#navToggle').wrap('<div id="navMenuWrap" />')
// $('<a id="homeLink" href="/index.html" />').appendTo('#navMenuWrap');
$('<a id="emailLink" class="enquiry enquire-trigger" href="#enquire-dropdown"/>').appendTo('#navMenuWrap'); // drop down email
// $('<a id="emailLink" href="/contact.html#enquiry" />').appendTo('#navMenuWrap'); // contact page email
// $('<a id="addressLink" href="#" />').appendTo('#navMenuWrap'); // address link
$('<a id="phoneLink" href="tel:' + phoneNumber + '" />').appendTo('#navMenuWrap');
$('#navToggle').click(function(){
$('#navToggle, html').toggleClass("activeNav");
});
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('body').addClass('mobileScrollStart');
}
else {
$('body').removeClass('mobileScrollStart');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
$('body').addClass('mobileScroll');
} else {
// upscroll code
$('body').removeClass('mobileScroll');
}
lastScrollTop = st;
});
$('#mobileMenu li').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
/* --------- MOBILE MENU -------------*/
body {
padding-top: 50px;
}
#mobileMenu {
position: fixed;
z-index: 1005;
top: 0;
left: 0;
right: 0;
bottom: auto;
}
.activeNav #mobileMenu {
/* height: 100%; */
bottom: 0;
box-sizing: border-box;
padding-bottom: 60px;
}
#mobileMenu nav {
overflow-y: auto;
height: 100%;
}
#mobileMenu span {
padding: 10px !important;
padding: 2.5vh 10px !important;
}
#navMenuWrap {
display: flex;
background: #111; /*color*/
}
#mobileMenu #navMenuWrap > * {
display: block;
flex: 1;
border-right: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
padding: 10px 5px;
box-sizing: border-box;
background: none;
}
.link0 #homeLink:before, .link0 #homeLink:after {
opacity: 0.3;
}
#mobileMenu #navMenuWrap > *:last-child {
border-right: 0px solid transparent;
}
#mobileMenu #navMenuWrap > *:before, #mobileMenu #navMenuWrap > *:after {
line-height: 1em;
text-align: center;
display: block;
color: #fff;
}
#mobileMenu #navMenuWrap > *:before {
font-family: FontAwesome;
margin-bottom: 5px;
font-size: 1em;
}
#mobileMenu #navMenuWrap > *:after {
font-size: 0.8em;
}
#mobileMenu #navMenuWrap > #navToggle:before {
content: "\f0c9";
}
#mobileMenu #navMenuWrap > #homeLink:before {
content: "\f015";
}
#mobileMenu #navMenuWrap > #emailLink:before {
content: "\f0e0";
}
#mobileMenu #navMenuWrap > #phoneLink:before {
content: "\f095";
}
#mobileMenu #navMenuWrap > #addressLink:before {
content: "\f041";
}
#mobileMenu #navMenuWrap > #navToggle:after {
content: "Menu";
}
#mobileMenu #navMenuWrap > #homeLink:after {
content: "Home";
}
#mobileMenu #navMenuWrap > #emailLink:after {
content: "Enquire";
}
#mobileMenu #navMenuWrap > #phoneLink:after {
content: "Phone";
}
#mobileMenu #navMenuWrap > #addressLink:after {
content: "Address";
}
/* --------- active nav -------------*/
#mobileMenu #navMenuWrap > #navToggle.activeNav:before {
content: "\f00d";
}
#mobileMenu #navMenuWrap > #navToggle.activeNav:after {
content: "Close";
}
html.activeNav body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow-y: none;
}
#mobileMenu {
transition: 0.3s;
}
.mobileScroll.mobileScrollStart #mobileMenu {
transform: translatey(-100%);
}
html.activeNav .mobileScroll.mobileScrollStart #mobileMenu {
transform: translatey(0%);
}
#menu {
display: none;
}
#navToggle {
width: 100%;
background: #222;
color: #f4f4f4;
padding: 10px 0;
position: relative;
text-align: left;
cursor: pointer; }
#navToggle:before {
font-family: FontAwesome;
margin-left: 8px;
content: "\f0c9 ";
line-height: 1em;
font-size: 1.5em; }
#navToggle:after {
margin-left: 8px;
content: "Menu";
line-height: 1em;
font-size: 1.5em; }
#mobileMenu {
display: inline-block;
background: #222;
}
#mobileMenu nav {
display: none; }
#mobileMenu li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#mobileMenu li a {
width: 100%;
text-decoration: none;
display: inline-block;
box-sizing: border-box; }
#mobileMenu li span {
display: block;
padding: 20px 10px;
color: #fff;
}
#mobileMenu .current {
background: rgba(0, 0, 0, 0.3);
}
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0);}
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > span:after {
position: relative;
display: inline-block;
font-family: FontAwesome;
margin-left: 10px;
content: "\f107";
line-height: 1em; }
#mobileMenu .parent.clicked > span:after {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
/* ---------------------------------- */
/* ----------- SUB MENU ----------- */
/* ---------------------------------- */
#mobileMenu li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
background: rgba(255,255,255,0.07); }
#mobileMenu li ul a {
padding-left: 30px; }
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0); }
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > a:after {
font-family: FontAwesome;
margin-left: 8px;
content: "\f107";
line-height: 1em; }