List group in Dropdown Menu in Mobile Size or otherwise it appears on Navbar
By Saurabh SinghIn this tutorial, I will show you how easily you can get the navbar and dropdown button on your HTML page. I’m styling it inside a head tag in a style tag. This styling is known as internal styling.
In this code, you will get a navbar with the anchor elements presents in the list group in all size of electronic devices except mobile size. In mobile size, in the right top, there will be a menu bar icon by clicking on that icon a list is open with the same list which is present in the list group and by seeing the color on the dropdown menu bar you can say that which one anchor element is active right now.
Happy New Year JavaScript Web Script to Share on Whatsapp with Countdown
Here I’m providing the code to get the navbar and dropdown button. You can customize it to make changes to it as per your need.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style>
body {
font-size: 16px;
color: #000;
background-color:#fff;
font-family: sans-serif;
}
#header-nav {
background-color: #9ACD32;
border-radius: 0;
border: 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 {
font-family: 'Lora', serif;
color: red;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p {
color: #000;
text-transform: uppercase;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span {
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
opacity: .7;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
opacity: .5;
}
#nav-list a span {
font-size: 1.8em;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
</style>
</head>
<body>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a href="#"><h1> Codespeedy</h1></a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li class="visible-xs active">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Log In </a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-heart"></span><br class="hidden-xs"> Sign UP </a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-map-marker"></span><br class="hidden-xs"> About </a>
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>You may also learn,
- How to get a Snowfall Effect in background using CSS
- How to make a Heart using only CSS
- Responsive Image Hover Effect With Pure CSS Code
As you can see in the list group, I have used the span class. Inside this class, you can give the name of any glyphicons. And modify the icons as per your need. Here is the link of all glyphicons with their names:
Leave a Reply