How to use hamburger menu in bootstrap?
May 08, 2022Hi Friends đź‘‹,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use hamburger menu in bootstrap with code example.
Hamburger Menu in Bootstrap is defined as a list of links or buttons or content on the navigation bar hidden or shown simultaneously when we click a button like a triple equal on the right side of the navigation bar.
Table of contents
- Includes bootstrap view
- Includes bootstrap libraries
- Define its class name
- Includes ajax and jQuery libraries
- Includes bootstrap libraries
This article will guide you to adding hamburger menu in Bootstrap with example.
How does Hamburger Menu work in Bootstrap
In bootstrap hamburger menu feature works based on <nav class=”navbar navbar-inverse navbar-static-top”>, class=”navbar navbar-inverse”, class=”navbar navbar-default” tags.
Syntax:
<nav class=”navbar navbar-inverse navbar-static-top”>
nav: nav tag in bootstrap tells you the browser that it is hamburger menu.
class=” navbar navbar-inverse navbar-static-top”: Gives static default hamburger menu.Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap libraries
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>Step 3: Define its class name
After that, create the gutter with a class name .gx-5.
<!-- navbar navbar-inverse navbar-static-top used for static hamburger menu -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- container gives content bootstrap alignment -->
<div class="navbar-header">
<!-- navbar-header gives header -->
<!-- navbar-toggle collapsed for hide the content -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<!-- sr-only gives feature, hides elements from all devices except screen -->
<span class="sr-only">Hamburger Menu</span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- icon-bar creates structure like triple equal -->
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<!--nav navbar-nav used to sets the navigation bar size( either increase or reduce) -->
<ul class="nav navbar-nav">
<li><a href="https://www.educba.com/tutorials/">Educba Course</a></li>
<li><a href="https://aguidehub.com/blog">aGuidehub</a></li>
<li><a href="https://infinitbility.com">Infinitbility</a></li>
<li><a href="https://www.youtube.com/">YouTube</a></li>
</ul>
</div>
</div>
</nav>Step 4: Includes ajax and jQuery libraries
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Step 5: Includes bootstrap libraries
Now, load the Bootstrap JavaScript file before closing the body tag and done.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- adds jQuery libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- adds ajax and bootstrap libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- adds bootstrap libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.navbar-header {
background-color: rgba(70, 77, 12, 0.472);
;
background-image: none;
}
#menu {
background-color: rgba(70, 77, 12, 0.472);
background-image: none;
}
</style>
</head>
<body>
</head>
<body>
<!-- navbar navbar-inverse navbar-static-top used for static hamburger menu -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- container gives content bootstrap alignment -->
<div class="navbar-header">
<!-- navbar-header gives header -->
<!-- navbar-toggle collapsed for hide the content -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<!-- sr-only gives feature, hides elements from all devices except screen -->
<span class="sr-only">Hamburger Menu</span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- icon-bar creates structure like triple equal -->
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<!--nav navbar-nav used to sets the navigation bar size( either increase or reduce) -->
<ul class="nav navbar-nav">
<li><a href="https://www.educba.com/tutorials/">Educba Course</a></li>
<li><a href="https://aguidehub.com/blog">aGuidehub</a></li>
<li><a href="https://infinitbility.com">Infinitbility</a></li>
<li><a href="https://www.youtube.com/">YouTube</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
</body>
</html>Check the output of the above code example.
All the best đź‘Ť
