0
navbar dropdpwmメニューにいくつかの問題があります。Navbarヘッダーとドロップダウンメニューの間の行
まず、navbar-headerとドロップダウンメニューの間に線があります。ドロップダウンメニューを開いたときに
第二には、若干の遅延があります。すぐにliのリンクが表示された後、暗い灰色の背景が表示されます。短い間、白いフォントがh2ヘッダーを隠しています。
//JS (to close the dropdown when clicking anywhere):
$(document).click(function(e) {
if (!$(e.target).is('a')) {
$('.collapse').collapse('hide');
}
});html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
margin-top: 60px;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.article {
flex: 1;
}
p {
line-height: 1.6;
}
footer {
background-color: #333;
color: white;
height: 100px;
text-align: center;
padding: 8px;
}
/*START Shrinks the default navbar height*/
.navbar {
min-height: 30px !important;
margin: 0px;
width: 100%;
background-color: #333;
height: 44px;
}
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:hover {
padding: 4px 5px 0px 5px !important;
height: 30px;
color: white;
font-size: 1.07em;
font-weight: 300;
margin: 2px 8px 0 0;
}
/*END*/
.nav.navbar-nav li a:hover {
color: white;
opacity: 0.8;
}
.navbar-toggle {
float: left;
border: none;
margin-top: 7px;
margin-left: 10px;
padding: 4px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {
background-color: #333;
}
/*Displays navbar dropdown on hover */
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
.navbar-default .navbar-header .icon-bar {
background-color: white;
width: 22px;
}
.navbar-default .navbar-toggle:hover .icon-bar {
background-color: #EFEFEF;
}
.navbar .navbar-brand {
color: white;
margin-top: -4px;
font-size: 1.7em;
margin-right: 15px;
font-family: 'Orbitron', 'Open Sans', sans-serif;
}
.navbar .navbar-brand:hover {
color: white;
opacity: 0.8;
}
/*Change hamburger menu to "x" on click */
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.4s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*Change Background color of toggle dropdown*/
.collapse.navbar-collapse {
background-color: #333;
}
@media (max-width: 992px) {
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:hover {
font-size: 1em;
}
}
@media (max-width: 767px) {
.navbar .navbar-brand {
position: absolute;
left: 50%;
margin-left: -100px !important;
display: block;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="main-wrapper">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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 top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<!--<a href="" class="navbar-brand"><img class="logo" src="../images/eclipse-logo.png"/></a> -->
<a href="#" class="navbar-brand">Eclipse Music</a>
</div>
<!-- end of navbar-header -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li><a href=""><span class="glyphicon glyphicon-home"></span>Home</a></li>-->
<li><a href="">Pedals</a>
</li>
<li><a href="http://www.eclipsemusic.org/guitars-basses-and-amps">Guitars, Basses and Amps</a>
</li>
<li><a href="">Lessons</a>
</li>
<li class="dropdown">
<a href="about/about.html">About Us <span id="addDropup"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Directions</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- end of collapse navbar-collapse -->
</div>
<!-- end of container -->
</div>
<!-- end of navbar navbar-default navbar-fixed-top -->
<div class="article">
<div class="container">
<h2>Welcome!</h2>
<br />
</div>
</div>
<!-- END of article -->
</div>
<!-- END of main-wrapper -->
<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>
可能な重複http://stackoverflow.com/questions/34573447/how-do-i-remove-white-back-from-my-bootstrap-navbar-and-text-colour） – vanburen
'.navbar.navbar-default .navbar-collapse {ボーダー：なし;ボックスシャドウ：なし。 } 'をCSSルールに適用し、今後** DevTools **をチェックしてください。参考までに、ドロップダウンにも「」タグがありません。 – vanburen
ありがとう@vanburen、それは美しく働いた。 –