How TO - Mobile Navigation Menu using CSS and JavaScript
In this article, we will learn: How to create a Mobile Navigation Menu with CSS and JavaScriptThis highlighted code is addition for mobile menu(will be visible on desktop too).
Step 1: Add CSS & JavaScript to template
May be inside same php file or template css file, you may insert this CSS.
/*********
MENU
*****************/
/* Style the navigation menu */
.topnav {
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: #fb414d;
padding: 10px 15px;
text-decoration: none;
font-size: 17px;
display: block;
margin: 7px;
}
/* Style the hamburger menu */
.topnav a.icon {
background: #FFFFFF;
border:1px solid #fb414d;
border-radius:50%;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Also add following JavaScript:
<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
x.style.position="absolute";
x.style.background="#FFFFFF";
x.style.right="10px";
x.style.width="250px";
}
}
</script>
Also check this : Desktop & Mobile menu in Joomla on Joomlafusion.com
Hope this helped.
Still need help! no problem, feel free to contact us Today