Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Examination Archives |</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body
{
background-color: #5F6163;
}
</style>
<div class="container">
<nav class="navbar navbar-inverse"role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-nav-collapse">
<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="#">Examination Archives</a>
</div>
<div class=" navbar-collapse collapse" id="example-nav-collapse">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation" >Syllabus</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Question Papers <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Semester 1</li>
<li>Semester 2</li>
<li>Computer Science</li>
<li>Electrical</li>
<li>Mechanical</li>
<li>Chemical</li>
<li>Civil</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Assignment<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Computer Science</li>
<li>Electrical</li>
<li>Mechanical</li>
<li>Chemical</li>
<li>Civil</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Faculty<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Computer Science</li>
<li>Electrical</li>
<li>Mechanical</li>
<li>Chemical</li>
<li>Civil</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
So the problem is that whenever i decrease the size of my browser, the navigation bar collapses, and gets visible on clicking the Toggle button. But the dropdown are not working whenever the navbar collapses. I think there is this problem due to the container box restricting the dropdown options to be visible.
Try putting your jquery library at the top.
Also:
Your link says "linkrel" and should have a space "link rel" might be the problem.
Related
I make two navbars but it doesnt work correctly. Do you have any advices ? It looks like this, but after minimizing I am missing HOME MIBs and LIBRARY tabs. I think that upper menu covers bottom menu.
I would like to be able to see all tabs after clicking on the menu button.
Here is my code
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
#media only screen and (max-width: 550px) {
body {
padding-top: 0px;
}
.navbar-fixed-top {position:static;}
.navbar{margin-bottom:0;}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse1" data-toggle="collapse">
<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 class="collapse navbar-collapse navbar-collapse1">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse2" data-toggle="collapse">
<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 class="collapse navbar-collapse navbar-collapse2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Use this. it is working perfact
I'm trying to integrate a custom theme for bootstrap
the theme i want to use is bootswatch
the only problem i'm currently facing is that the dropdown menu in the navigation bar is not working.
this is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
<html>
<head>
<title>Login</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I use bootstrap 4.3.1 instead of 3.3.7 to fix this problem.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Maybe you can try it.
so i have got this code ( the data-toggle and data-target are black in my n++ also i used data target instead of data-target which shows me red..)
i want to make my page responsive for mobile users and large desktop users.
but when i zoom in to the display, there is on the right top corner the button which should open the drop down menu, but it doesn't.
<html>
<head>
<title>Built your Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!--jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<nav>
<nav class="navbar navbar-default navbar-static-top"> <!-- color, statisch-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data target=".navbar-collapse "> <!-- button, navbar mit dropmenu wenn bildschirm zu klein-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- creates 3 lines in the toggle navigation when screen too little -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">TAIL
<!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> -->
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<!--<li><a class="navbar-brand" href="index.php">TAIL</a></li>-->
<li class="dropdown"> <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a></li>
<li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up
<span class="glyphicon glyphicon-user" id="sserIcon"></span>
</a>
</li>
<li class="dropdown">
<a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In
<span class="glyphicon glyphicon-log-in" id="logIcon"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
You have an missing dash in your code.
Instead of this:
data target=".navbar-collapse "
do this:
data-target=".navbar-collapse "
And then it works.
I am using bootstrap for the first time, and have seen examples online about toggle menus being able to automatically populate themselves with all the links in the non-toggle version. I attempted to do this below but for some reason mine doesn't seem to work.
I've also looked all over but cannot find any answers on other posts or websites that can help me.
Any help would be really appreciated.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<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 class="collapse navbar-collapse" id="myNavbar">
<ul class="navi nav navbar-nav">
<li class="dropdowni dropdown">
<a class="dropdowni dropdown-toggle" id="nobackground" data-toggle="dropdown" href="#">Option 1</a>
<ul class="dropdowni dropdown-menu">
<li>Option 1-1</li>
<li>Option 1-2</li>
<li>Option 1-3</li>
<li>Option 1-4</li>
<li>Option 1-5</li>
</ul>
</li>
<li id="grey">//</li>
<li><a id="nobackground" href="#">Option 2</a></li>
<li id="grey">//</li>
<li><a id="nobackground" href="#">Option 3</a></li>
<li id="grey">//</li>
<li><a id="nobackground" href="#">Option 4</a></li>
</ul>
</div>
</div>
</nav>
I'm sorry if my code is messy - I've not done much web development before. I'm guessing it's to do with some ordering of the <li> and <a> tags, but I could not work it out.
Thank you.
Hi your code is working perfectly just see the preview here. see the output
I have only added a navbar-default class in tag.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> </head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> <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 class="collapse navbar-collapse" id="myNavbar">
<ul class="navi nav navbar-nav">
<li class="dropdowni dropdown"> <a class="dropdowni dropdown-toggle" id="nobackground" data-toggle="dropdown" href="#">Option 1</a>
<ul class="dropdowni dropdown-menu">
<a href="#">
<li>Option 1-1</li>
</a>
<a href="#">
<li>Option 1-2</li>
</a>
<a href="#">
<li>Option 1-3</li>
</a>
<a href="#">
<li>Option 1-4</li>
</a>
<a href="#">
<li>Option 1-5</li>
</a>
</ul>
</li>
<li id="grey">//</li>
<li> <a id="nobackground" href="#">Option 2</a> </li>
<li id="grey">//</li>
<li> <a id="nobackground" href="#">Option 3</a> </li>
<li id="grey">//</li>
<li> <a id="nobackground" href="#">Option 4</a> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
In bootstrap3 I am trying to remove horizontal scroll bar in mobile it looks fine in desktop view but in mobile view the horizontal bar is shown I read that horizontal bar comes due to container-fluid so to I used tag but it is not work
here is the code
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
You can use:
overflow:hidden;
in css or declarate it deirect in the html:
<style type="text/css">
.container-fluid {
overflow-x:hidden;
overflow-y:hidden;
overflow:hidden;
}
</style>
I hope it helps
Everything looks fine to me. You probably have some custom CSS doing something wrong. I even tried excluding "viewport" meta tag, still doesn't show overflow.
<!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">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>