How TO - Mobile Navigation Menu using CSS and JavaScript

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

 Abdul Waheed : (Hire Joomla & PHP Pakistani Freelancer)