Skip to main content
K
karleyg8993141
Participant
July 13, 2017
Answered

What is wrong with my code? Shopping cart dropdown is not aligned in nav bar

  • July 13, 2017
  • 2 replies
  • 818 views

When I preview my site, the shopping cart is underneath the login button in the nav bar. How do I line them up so they don't interfere with each other ?

Thanks!

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>TrueFiltersandMembranes</title>

<script src="jQueryAssets/jquery-1.11.1.min.js"></script>

<script src="jQueryAssets/jquery-ui-effects.custom.min.js"></script>

<script type="text/javascript">

</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!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">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <!-- 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:// -->

      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

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

  </head>

</html>

<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="#">True Filters and Membranes</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"><a href="#">Home <span class="sr-only">(current)</span></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" role="button" aria-haspopup="true" aria-expanded="false">Login <span class="caret"></span></a>

<ul class="dropdown-menu"><br><div style="width:300px;">

          <div class="panel panel-primary">

          <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>

          </div>

        </li>

  </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

  <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span> 7 - Items<span class="caret"></span></a>

          <ul class="dropdown-menu dropdown-cart" role="menu">

              <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>

              <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>

              <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>

              <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>

              <li class="divider"></li>

              <li><a class="text-center" href="">View Cart</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

  <script type="text/javascript">

  </script>

</nav>

<p><br/></p>

<p><br/></p>

<p><br/></p>

<div class="container-fluid">

  <div class="row">

  <div class="col-md-1"></div>

  <div class="col-md-2">

  <div class="nav nav-pills nav-stacked">

  <li class="active"><a href="#"><h4>Categories</h4></a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  </div>

  <div class="nav nav-pills nav-stacked">

  <li class="active"><a href="#"><h4>Brand</h4></a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  </div>

  </div>

<div class="col-md-8">

  <div class="panel panel-info">

  <div class="panel-heading">Products</div>

  <div class="panel-body">

  <div class="col-md-4">

  <div class="panel panel-info">

  <div class="panel-heading"> True Ultra Filter</div>

  <div class="panel-body">

  <img src="product_images/Icon.jpg"/>

  </div>

  <div class="panel-heading"> $500.00

  <button style="float:right;" class="btn btn-danger btn-xs">Add to Cart</button></div>

  </div>

  </div>

  </div>

  <div class="panel-footer">&copy;2017</div>

  </div>

  </div>

  <div class="col-md-1"></div>

</body>

</html>

This topic has been closed for replies.
Correct answer osgood_

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>

2 replies

O
osgood_Correct answer
Legend
July 13, 2017

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>

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 13, 2017

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

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices