Bootstrap Responsive DropDown Menu, Bootstrap dropdown menubar

Bootstrap is a free and open source CSS framework guided on responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for template typography, form, button, navigation, and internal interface components.

This is bootstrap code, this code is found in head section


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

This is custom style for bootstrap


<style>
.navbar{
margin-bottom: 0px;
}
.nav, .navbar-nav {
text-align: center !important;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-radius: 10px;
border: 1px Solid #eee;
border-radius: 10px;
padding: 0px;
background-color: #eee;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover
{
color:#C00;
box-shadow: none;
background-color:
transparent;}
}
</style>

Bootstrap Resposive DropDown Menu Code


<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#myNavbar' data-toggle='collapse' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' rel='home' href='https://mycoaching.in' style="padding-top:0px;">
<img src="https://cdn-images-1.medium.com/max/800/1*xLafMO5PAVL3QSwiYKV7CA.png" alt="my coaching" height="50"/>
</a>
</div>
<div class='collapse navbar-collapse' id='myNavbar'>
<ul class='nav navbar-nav'>
<li itemprop='name'><a class='' href='/p/news.html' itemprop='url' title='News'>News</a></li>
<li itemprop='name'><a class='' href='/p/jobs-news-online-form.html' itemprop='url' title='Latest Jobs'>Latest Jobs</a></li>
<li itemprop='name'><a class='' href='/p/admit-card.html' itemprop='url' title='Admit Card'>Admit Card</a></li>
<li itemprop='name'><a class='' href='/p/resultnews.html' itemprop='url' title='Result'>Result</a></li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>More News <span class='caret'/></a>
<ul class='dropdown-menu' role="menu">
<li itemprop='name'><a class='d-d-m-u' href='/p/answer-key.html' itemprop='url' title='Answer Key'>Answer Key</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/syllabus-of.html' itemprop='url' title='Syllabus News'>Syllabus News</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/admission.html' itemprop='url' title='Addmission News'>Addmission News</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Subjec Wise Study <span class='caret'/></a>
<ul class='dropdown-menu'>
<li><a class='d-d-m-u' href='https://www.mycoaching.in/p/hindi.html' title='Hindi'><b>Hindi</b></a></li>
<li><a class='d-d-m-m' href='#' title='English'><b>English</b></a></li>
<li><a class='d-d-m-m' href='#' title='Mathematics'><b>Mathematics</b></a></li>
<li><a class='d-d-m-m' href='#' title='Basic Mathematics'> 1. Basic Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='Advance Mathmatics'> 2. Advance Mathmatics</a></li>
<li><a class='d-d-m-m' href='#' title='Pure Mathematics'>
(I) Pure Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='Applied Mathematics'>
(II) Applied Mathematics</a></li>
<li><a class='d-d-m-m' href='#' title='SST'><b>SST</b></a></li>
<li><a class='d-d-m-m' href='#' title='History'>
1. History</a></li>
<li><a class='d-d-m-m' href='#' title='Geography'>
2. Geography</a></li>
<li><a class='d-d-m-m' href='#' title='Environment Science'>
3. Environment Science</a></li>
<li><a class='d-d-m-m' href='/p/science.html' title='SCIENCE'><b>SCIENCE</b></a></li>
<li><a class='d-d-m-m' href='#' title='Physics'>
1. Physics</a></li>
<li><a class='d-d-m-m' href='#' title='Chemistry'>
2. Chemistry</a></li>
<li><a class='d-d-m-m' href='#' title='Biology'>
3. Biology</a></li>
<li><a class='d-d-m-m' href='#' title='Computer Science'><b>Computer Science</b></a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology-and-pedagogy.html' itemprop='url' title='Phycology And Pedagogy'><b>Phycology And Pedagogy</b></a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='Child Phycology'> 1. Child Phycology</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pedagogy-education-science.html' itemprop='url' title='Education Science'> 2. Education Science</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Education Science <span class='caret'/></a>
<ul class='dropdown-menu'>
<li itemprop='name'><a class='d-d-m-u' href='/p/phycology-and-pedagogy.html' itemprop='url' title='मनोविज्ञान और शिक्षण शास्त्र'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न और श&#2367;क&#2381;षण श&#2366;स&#2381;त&#2381;र</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='मनोविज्ञान'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/pedagogy-education-science.html' itemprop='url' title='शिक्षाशास्त्र / शिक्षणशास्त्र'>श&#2367;क&#2381;ष&#2366;श&#2366;स&#2381;त&#2381;र / श&#2367;क&#2381;षणश&#2366;स&#2381;त&#2381;र</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/education-management.html' itemprop='url' title='शैक्षिक प्रबंधन एवं प्रशासन'>श&#2376;क&#2381;ष&#2367;क प&#2381;रब&#2306;धन एव&#2306; प&#2381;रश&#2366;सन</a></li>
<li itemprop='name'><a class='d-d-m-m' href='/p/areas-of-management.html' itemprop='url' title='प्रबंधन के क्षेत्र, श्रेणियां और कार्यान्वयन'>प&#2381;रब&#2306;धन क&#2375; क&#2381;ष&#2375;त&#2381;र, श&#2381;र&#2375;ण&#2367;य&#2366;&#2306; और क&#2366;र&#2381;य&#2366;न&#2381;वयन</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/education-method-system.html' itemprop='url' title='शिक्षा और शैक्षिक पध्द्तियाँ - शब्दकोश'>श&#2367;क&#2381;ष&#2366; और श&#2376;क&#2381;ष&#2367;क पध&#2381;द&#2381;त&#2367;य&#2366;&#2305; - शब&#2381;दक&#2379;श</a></li>
</ul>
</li>
<li class='btn-group'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Genaral Awareness <span class='caret'/></a>
<ul class='dropdown-menu'>
<li><a class='d-d-m-u' href='#' title='Current Affairs'>Current Affairs</a></li>
<li><a class='d-d-m-m' href='#' title='General Knowledge'>General Knowledge</a></li>
<li><a class='d-d-m-m' href='#' title='General Science'>General Science</a></li>
<li><a class='d-d-m-d' href='#' title='Our Society'>Our Society</a></li>
<li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

full-width

You May Also Like