Website Under Maintenance

We working on broken links and updating the content on website

We are regret for inconvenience


Bootstrap responsive navegation menu bar step by step - Bootstraps Tutorial

Navegation Classes


To create responsive navegation menu bar we need to follow few steps:


Step 1


Add css and js files to your working document in between <head> </head>

1.1: <link href="css/bootstrap.css" rel="stylesheet">

1.2: <script src="js/bootstrap.min.js"></script>

Step 2


<nav class="navbar navbar-default navbar-static-top">

</nav>

Step 3:

To create toggle collapsed button. It will show on small screens and hide on larage screens ex:


<nav class="navbar navbar-default navbar-static-top">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Adroit Neo</a>
</div>
</nav>

Step 4:

To create menu bar and mandatory classes ex:


<nav class="navbar navbar-default navbar-static-top">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Adroit Neo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-user"></i> About Me</a></li>
<li><a href="#"><i class="fa fa-gears"></i> My Works </a></li>
<li><a href="#"><i class="fa fa-gears"></i> Supporting</a></li>
</ul>
</div>
</nav>

Step 5:

How to Add Dropdown Menu to above menu barex:


<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-gears"></i> My Works <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Web Designing</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Graphic Designs</a></li>
</ul>
</li>

Post a Comment

Post a Comment