I'm making my first webpage with Bootstrap and I got the dropdown menu to work on my nav bar, however, when you click it, it selects the entire top of the screen above the bar and highlights it with the blue highlight color. I do not want this. How can I solve the problem? Here is the codeply link of my code: Codeply: http://codeply.com/go/8H1SZB4FvV
I also posted a screenshot of the problem in the comments below since people seem to have trouble reproducing this.
This problem is still unsolved, more information is in the comments, I'd appreciate any help.
Here is my code
<div class="imgHide">
<img src="Logo.gif" alt="image" style="width:225px;height:150px">
</div>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Title</h3>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="dropdown">
<a href="javascript:return false;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Possible Header</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header 2</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">iteme</a></li>
<li><a href="#">item</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header 3</li>
<li><a href="#">iteme</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Title</h1>
<p class="lead">description.</p>
<p><a class="btn btn-lg btn-success" href="../Registration Forms/indexLogin.html" role="button">Log In!</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4 center-block">
<h2>Showcase 1</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p class="text-danger">Some important text about a cool event</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4 center-block">
<h2>Showcase 2</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p>Another showcase of some stuff.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4 center-block">
<h2>Showcase 3</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p>Here are examples of how showcases would look. (Optional)</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
</div>
<div class="col-lg-4 centerMe">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You have earned the achievement <i>Sample Me</i>.
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
<!-- scripts to make all the features work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Here's the link to the actual Bootstrap CSS that is imported into this. Also, this is what I used for the personal CSS.
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #FFFFFF;
text-align: center;
background-color: #006600; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#006600));
background-image: -webkit-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -moz-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -ms-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -o-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #006600), to(#006600));
background-image: linear-gradient(top, #006600 0%, #e5e5e5 300%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006600', endColorstr='#006600',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #006600;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
body
{
background-color:lightblue
}
}
