1 Correct answer
Now an EX-MVP (Hope I'm not breaking any rules)
If you ARE going to use Bootstrap and I dont advice you do then you must start commenting your code <!-- end panel --> <!-- end dropdown-menu --> etc - that way you will be able to easily navigate your way around it. The unfortunate aspect of Bootstrap is it writes bloated html code which means its very hard to see patterns emerging when working directly with the code so YOU MUST comment the code to help you.
You must also link to a specific css st
...
2
Replies
Start by cleaning up your code validation errors. You have 5 errors indicated by a Red X and described in your Output Panel. See screenshot.
Unpaired Div tags will cause layout issues.
Nancy
Now an EX-MVP (Hope I'm not breaking any rules)
If you ARE going to use Bootstrap and I dont advice you do then you must start commenting your code <!-- end panel --> <!-- end dropdown-menu --> etc - that way you will be able to easily navigate your way around it. The unfortunate aspect of Bootstrap is it writes bloated html code which means its very hard to see patterns emerging when working directly with the code so YOU MUST comment the code to help you.
You must also link to a specific css stylesheet where you can write your own css styles which will either overwrite the Bootstrap default css styles or be in addition to them. I have moved the css styles to the head section of the page between <style> tags. Once you have tested your css its advisable to move it to an external linked css file. As long as that link comes AFTER the link to the Bootstrap default css files they will over-ride them.
I have cleaned up your Bootstrap navbar code, it is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
/* LOGIN */
.login {
width: 300px;
background-color: #337AB7;
padding: 20px 10px;
color: #fff;
}
/* CART ITEMS */
.cart-items {
width: 300px;
padding: 10px;
}
.cart-items li {
padding: 7px 0 7px 0;
border-top: 1px solid #ccc;
}
.cart-items li:first-child {
border-top: none;
}
</style>
</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="#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="#">True Filters and Membranes</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" ><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
</ul>
<form class="navbar-form navbar-left">
<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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <span class="caret"></span></a>
<div class="dropdown-menu login">
<div class="panel-heading">Login</div>
<div class="panel-heading">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required/>
<label for="email">Password</label>
<input type="password" class="form-control" id="password" required/>
<p><br/></p>
<a href="#" style="color:white; list-style:none;">Forgotten Password</a><input type="submit" class="btn btn-success" style="float:right;" id="login" value="Login">
</div>
</div>
<!-- end panel -->
</li>
<!-- end dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> 7 - Items<span class="caret"></span></a>
<ul class="dropdown-menu cart-items">
<!-- start cart item -->
<li>
<span class="item">
<span class="item-left">
<img src="http://lorempixel.com/50/50/" alt="" />
<span class="item-info">
<span>Item name</span>
<span>23$</span>
</span>
</span>
<span class="item-right">
<button class="btn btn-xs btn-danger pull-right">x</button>
</span>
</span>
</li>
<!-- end cart item -->
<!-- start cart item -->
<li>
<span class="item">
<span class="item-left">
<img src="http://lorempixel.com/50/50/" alt="" />
<span class="item-info">
<span>Item name</span>
<span>23$</span>
</span>
</span>
<span class="item-right">
<button class="btn btn-xs btn-danger pull-right">x</button>
</span>
</span>
</li>
<!-- end cart item -->
<!-- start cart item -->
<li>
<span class="item">
<span class="item-left">
<img src="http://lorempixel.com/50/50/" alt="" />
<span class="item-info">
<span>Item name</span>
<span>23$</span>
</span>
</span>
<span class="item-right">
<button class="btn btn-xs btn-danger pull-right">x</button>
</span>
</span>
</li>
<!-- end cart item -->
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end dropdown -->
</ul>
<!-- end navbar-right -->
</div><!-- end navbar-collapse -->
</div><!-- end container-fluid -->
</nav>
<!-- end navbar -->
</body>
</html>
AdChoices