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>
Related
I am having an issue with my bootstrap 3 dropdown menu, specifically when its on the hamburger version of the menu. The following actions are happening:
Once a menu item is selected, all items in the ul remain highlighted, the next time you open the menu.
When the page is viewed on a mobile device, the menu doesnt disappear once a menu item is selected.
I have tried a couple of different scripts, similar to this Github topic but I thinks I am placing the script in the wrong place. I have made a few different changes to try get it to work but I cant figure it out. I have taken the source from w3schools topic.
Any help would be greatly appreciated to fix this issue.
Thanks in advance.
Here is the navbar code I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Had to add some jQuery to it, and it worked.
Will make slideUp transition smoother as soon as I get the chance.
Just adding and removing few classed worked.
And on toggle, you get the removed classes back. So not to worry about that.
Place the below code in your html before your <html>
<script>
JqUery text
</script>
$(".dropdown-menu").click(function() {
$(".navbar-collapse").removeClass("in");
$(".navbar-toggle").addClass("collapsed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
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.
I'm making an application with bootstrap and I have a nav bar, however for some reason when I resize the page the links disappear but the toggle button doesn't show.
Here is my nav bar:
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">title</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</nav>
Any help to fix this would be greatly appreciated.
You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your 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>
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
you havent added a toggle button as i can see in your code
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">title</div>
</div>
For more details refer Navbar documentation (bootstrap)
in my case I am using bootstrap5 but class I was using old version, after changing code as below it worked for me by going though BS5 W2Schools:
<nav class="navbar navbar-expand-sm bg-dark">
<div class="container-fluid">
Recipe Book
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/recipes">Recipes</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/shopping-list">Shopping List</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown" appDropdown>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</nav>
referece:https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
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>
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.