Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Hey I have a menu which is a list of tabs, each tab is separate from the other tab using a vertical line. I am trying to figure out how to make this menu more responsive, for example make some kind of hamburger menu. so far I didn't succeeded because I don't familiar with the principles of making responsive components very well without bootstrap.
The code is here
.tabs {
padding: 0;
}
.tabs > li {
list-style-type: none;
display: inline-block;
height: 25px;
line-height: 25px;
padding:0px 15px ;
color: #535355;
font-size: 18px;
font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
font-weight:bold;
text-decoration: none;
vertical-align: top;
cursor: pointer;
border-right: 1px solid #D1D1D1;
}
.tabs > li:last-child{
border-right:none;
}
.tabs-link{
color: #4C4C4C;
font-size: 18px;
text-decoration: none;
}
.tabs-link:hover,
.tabs-link:link{
color: #3983C4;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav id="tabs_navbar" class="navbar navbar-collapse">
<ul class="tabs">
<!-- tabs navbar-->
<li class="tabs-item">
Analytics Summary
</li>
<li class="tabs-item">
TDCG
</li>
<li class="tabs-item">
Key Gas
</li>
<li class="tabs-item">
Duval Triangle
</li>
<li class="tabs-item">
Duval Pentagon
</li>
<li class="tabs-item">
NEI
</li>
<li class="tabs-item">
PTX
</li>
<li class="tabs-item">
Gas Trends
</li>
<li class="tabs-item">
Data Table
</li>
<li class="tabs-item">
Playground
</li>
<li class="tabs-item">
Analytics Settings
</li>
</ul>
</nav>
You can use #media queries in css.
they let you define different styles for different screen sizes.
usually you define a few breaking points where the website behaves differently.
checkout Using media queries and Responsive Menu Concepts
for more information
Here is a very basic example on JSFiddle demonstrating the basic idea, try to resize the view to see the menu changes the layout mode. hover over the green box in "hamburger" mode to see the menu
If you are using Bootstrap then try this following code :
<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="#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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Following is tested and works
<!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>Bootstrap Navigation Menu</title>
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Related
When a user hover on anchor every anchor except the one hovered change color. Lets say there is link1 link2 link3. If the user hovers on link1 I want the color of link2 and link3 to be changed. same with the others.
Here is my attempt on it so far link on codpen
a:hover{color:green}
#link1:hover{color: originalcolor}
#link2:hover{color: originalcolor}
#link3:hover{color: originalcolor}
This can be achieved using jQuery hover() function like this -
$( "a" ).hover(
function() {
$("a").not($(this)).css("color","green");
},function(){
$("a").css("color","white");
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end container -->
P.S Expand the snippet to full screen to view best result
Pretty sure you can do this with pure CSS. Add a hover rule for the container that changes the children, but also add a hover state rule for the child that you want to be different.
ul li {
transition: background-color 200ms ease;
}
ul:hover li {
background-color: lightblue;
}
ul:hover li:hover {
background-color: yellow;
}
<ul>
<li>Hello</li>
<li>World</li>
<li>Foo</li>
<li>Bar</li>
<ul>
I have a 2 li dropdowns in the nav menu on bootstrap. I want the first to hide, and the second not to. But by default bootstrap hides all lists under the burger icon on small screens.
I am using pure bootstrap 3 code from there site:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
NOT HIDE ON MOBILE <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- HOW TO MAKE THIS PART NOT HIDE ON MOBILE? -->
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
In this case you'd have to add some custom CSS media queries to position the navbar components accordingly.
Demo: http://www.codeply.com/go/5E3YxlDKYy
/* float the left and right collapsible navs only on desktop */
#media (min-width: 768px) {
.pull-sm-left {
float:left;
}
.pull-sm-right {
float:right;
}
}
/* absolute position the single item next to the brand on mobile */
#media (max-width: 767px) {
.navbar-text.list-inline {
position: absolute;
z-index: 1;
top: 0;
left: 100px;
}
}
Well you can put it after navbar-brand inside navbar-header div as:
<a class="navbar-brand" href="#">Brand</a>
<a class="btn btn-default pull-right" href="#">Menu</a>
You can use button or drop downs there
Hope this helps..
I've seen this topic,
Bootstrap 3 collapsed menu not working on mobile screens
but still couldnt resolve, i get the button, but it doesn't work
<!DOCTYPE html>
<html lang="en">
<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>GREENLUX</title>
<!-- Bootstrap -->
<link href="http://greenlux.pt/apresentacao/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="http://greenlux.pt"><img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt=""/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Início <span class="sr-only">(current)</span> </li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>GU10 </li>
<li class="dropdown"> E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown"> R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown"> 2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown"> SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown"> DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</li>
<!--
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li role="separator" class="divider"></li>
<li>Separated link </li>
<li role="separator" class="divider"></li>
<li>One more separated link </li>
</ul>
</li>
-->
</ul>
<!--
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Link </li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li role="separator" class="divider"></li>
<li>Separated link </li>
</ul>
</li>
</ul>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://greenlux.pt/apresentacao/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://greenlux.pt/apresentacao/js/bootstrap.js"></script>
</body>
</html>
and btw, how can i put the menus open by mouse hover?
i've tried already and couldn't do it
You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.
https://jsfiddle.net/gno4zcrr/1/
.dropdown:hover .dropdown-menu {
display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="http://greenlux.pt">
<img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>GU10 </li>
<li class="dropdown">
E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown">
R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown">
2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown">
SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown">
DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm trying to find a solution for my site navigation that consists with more links. After add more links it display in 2, 3 lines.please check the attached picture.This is after add more links
in above picture, i added blue colored link and rest of all are default bootstrap navigation. I want to keep navigation in one line. if need to see more links, need to click that blue colored link (for testing purpose i set it to display none). also when re sizing the browser it also should keep in one line.
i wrote a jquery code and it works when browser decreasing the size. but when increasing the size it doesn't work by adding one by one again. Is there anyway to do this? Anybody can please help me to solve the issue or by giving an idea.
Thanks
my codes,
$(document).ready(function(e) {
$(document).load($(window).bind("load", resThis));
$(document).load($(window).bind("resize", resThis));
var tot=$('.nav').find('.chld').length;
var pos_top=$('.btn').position().top;
var marg=$('.container').width();
function resThis(){
for(var i=tot; i>=0; i--){
if(pos_top>0){
$( ".nav .chld:nth-child("+i+")" ).addClass('a');
}
pos_top=$('.btn').position().top;
}
}
});
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
//ul{list-style:none;}
//ul li{float:left; padding:10px 30px; background-color:#C0B9B9; margin:10px; border-radius:10%;}
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active chld">Link <span class="sr-only">(current)</span></li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-info btn-lg" style="float:right;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
it works as intended for me even in full-screen and resizing it to all kinds of width... cant replicate the error you are describing and showing.
I am working on a website in HTML and CSS. I have installed bootstrap and added in a navbar. The problem is that the navbar has two dropdown menus, neither of which are working. They show up in the navbar, but clicking on them does nothing.
Here is the code header information:
<link type="text/css" rel="stylesheet" href="my_portfolio.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'>
Here is the code for the navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Skills<span class="sr-only">(current)</span></li>
<li class="dropdown">
Projects<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Schools</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And here is the Bootstrap JS info I added to the bottom of the body:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
For the Bootstrap Navbar element to work, you will also need the Bootstrap css file - get it here:
http://getbootstrap.com/getting-started/
or just insert this into your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Make sure you have jQuery in your header too:
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
Working jsfiddle: https://jsfiddle.net/jsheridan390/3fuhLayt/
Be careful u are including bootstrap js below the jquery and also check console is there any error ?
Do you have include jquery into head ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
just change href="#" to href=""
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
Working fiddle https://jsfiddle.net/DTcHh/15547/