How TO - Mobile Navigation Menu
Learn how to create a top navigation menu for smartphones / tablets with CSS and JavaScript.
Mobile Navigation Bar
Create A Mobile Navigation Menu
Step 1) Add HTML:
Example
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="#"tryit.asp?filename=tryhow_js_mobile_navbar">Try it Yourself »
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="#"tryit.asp?filename=tryhow_js_mobile_navbar">Try it Yourself »
Tip: To create a responsive navigation bar, that works on all devices, read ourHow To - Responsive Top Navigation tutorial.
Tip: Go to ourCSS Navbar Tutorial to learn more about navigation bars.
