0
Die Website, die ich entwickle, macht mich verrückt. Ich habe eine Medienabfrage, um die Navbar zu reduzieren, aber ich weiß nicht genau, wie man den Knopf ändert. Der Kollaps wird ebenfalls nicht korrekt angezeigt. Versucht, navhar Höhe zu ändern, zu kompensieren und versuchte, Position zu verwenden: relativ aber kein Glück.bootstrap nav bar kollabieren ausgaben
HTML
<div class="containter-fluid" id="full-size-container">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" id="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="LOGO"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
Menu
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav" id="nav">
<li><a href="home-page.html">Home</a></li>
<li><a href="superstars.html">Superstars</a></li>
<li><a href="#">Shows</a></li>
<li><a href="about-us.html">About </a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/banner1.jpg" alt="banner1">
</div>
<div class="item">
<img src="images/banner2.jpg" alt="banner2">
</div>
<div class="item">
<img src="images/banner3.jpg" alt="banner3">
</div>
<div class="item">
<img src="images/banner4.jpg" alt="banner4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Und CSS
body{
padding-top: 0px;
background-color: black;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0px;
padding: 0px;
font-family:"Open Sans";
height: auto;
}
.carousel .item {
width: auto;
max-height: 700px;
height: auto;
object-fit: cover;
}
.carousel-inner > .item > img {
height: none;
width: 100%;
overflow:hidden;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.jumbotron{
padding-top:100px;
padding-bottom: 00px;
overflow: hidden;
}
#nav{
margin-left: 80px;
}
ul li{
position:relative;
top: 25px;
left: 00px;
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
}
@media screen and (max-width: 1170px){
.navbar-header {
float: none;
}
.navbar-brand{
height:;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid ;
background-color: black;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
position: relative;
top: -10px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand > button{
position: relative;
top: 10px;
right: 50px;
}
}
.navbar-brand > img{
left: 30px;
height:100px;
max-height:100px;
width:auto;
position: relative;
top: -15px;
}
#navbar {
font-size: 1.3em;
width: 100%;
text-transform: uppercase;
height: 100px;
background-color: black;
color: blue;
margin: 0px;
overflow: hidden;
}
ul li a{
color: blue;
}
#navbar .navbar-toggle{
color: white;
font-weight: bold;
border-color: white;
}
#navbar .navbar-toggle:hover {
color: #333;
background-color: #ddd;
}
#navbar .navbar-toggle .glyphicon{
color:white;
}
#navbar .navbar-toggle:hover .glyphicon{
color:white;
}
Ausgabe ist:
Collapse navbar nicht über dem Karussell Collapse navbar startet nicht von der Navigationsleiste nicht zeigen (man kann Siehe Karussell-Folie zwischen der Schaltfläche "Zusammenfalten" und dem Start der Navigationsleiste.) Menü-Taste m ust 1.2x werden größer
Danke für Ihre Hilfe
Hallo @RenierSwart, können Sie dies in einem Schnipsel oder JSFiddle duplizieren? – EricBellDesigns