Responsible Navbar Dropdown Button
Hallo!
Bin hier komplett neu und brauche Hilfe.
Ich möchte gerne für meine Homepage mit Bootstrap eine Navbar (fixed top) haben, die, wenn die Website vom smartphone aufgerufen wird, in ein Dropdown menu umgewandelt wird.
Ich habe schon Navbar und Carousel gecodet und am PC(Google Chrome) funktioniert alles Problemlos, aber rufe ich die Seite vom smartphone aus auf, ist der Body zwar im Center und die Navbar ein Dropdown, aber der Button fürs Dropdown ist ca 100px weiter rechts... ist natürlich Suboptimal... Ist wahrcheinlich total easy aber ich steh einfach aufm Schlauch...
Hier mal mein HTML code (Body):
HTML-Code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<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="#">xKiba</a>
</div> <!-- navbar-header -->
<div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Kiba</a></li>
<li class="navbar-item"><a href="#">Videos</a></li>
<li class="navbar-item"><a href="#">Infos</a></li>
<li class="navbar-item"><a href="#">Kontakt</a></li>
</ul>
</div> <!-- collapse -->
</div> <!-- container -->
</div> <!-- navbar inverse -->
</div> <!-- container -->
</div> <!-- navbar-wrapper -->
CSS:
HTML-Code:
.navbar-wrapper {
height: 50px;
background-color: #222;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
box-shadow: none;
border: 0px;
}
.navbar {
border: 0px;
}
.navbar-header {
border: 0px;
}
.navbar-item:hover {
background-color: rgba(255,255,255,.2);
}
/*-----------------------
Carousel
-----------------------*/
#myCarousel .item {
height:307px;
max-width: 768px;
}
#slide1 {
background: url('../pics/c_m_001.jpg') top center no-repeat;
}
#slide2 {
background: url('../pics/c_m_002.jpg') top center no-repeat;
}
#slide3 {
background: url('../pics/c_m_003.jpg') top center no-repeat;
}
.carousel {
margin-top: 50px;
height:307px;
margin-bottom: 40px;
max-width: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.carousel-caption {
z-index: 10;
}
/*-----------------------
Global
-----------------------*/
.container {
width: 768px;
margin-left: 20%;
margin-right: 20%;
}
body {
margin-left: auto;
margin-right: auto;
padding-bottom: 40px;
color: #5a5a5a;
}
.thumbnail1 {
width: 140px;
height: 140px;
}
/*-----------------------
Media Queries
-----------------------*/
/*
@media (max-width: 480px) {
}
*/
@media (max-width: 768px) {
#slide1 {
background: url('../pics/c_s_001.jpg') top center no-repeat;
}
#slide2 {
background: url('../pics/c_s_002.jpg') top center no-repeat;
}
#slide3 {
background: url('../pics/c_s_003.jpg') top center no-repeat;
}
.carousel {
margin-top: 50px;
height:192px;
max-width: 480px;
}
#myCarousel {
margin-top: 50px;
}
#myCarousel .item {
height:192px;
max-width: 480px;
}
.container {
width: 480px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1200px) {
#slide1 {
background: url('../pics/c_l_001.jpg') top center no-repeat;
}
#slide2 {
background: url('../pics/c_l_002.jpg') top center no-repeat;
}
#slide3 {
background: url('../pics/c_l_003.jpg') top center no-repeat;
}
.carousel {
margin-top: 50px;
height:480px;
max-width: 1200px;
}
#myCarousel .item {
height:480px;
max-width: 1200px;
}
.container {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
Hoffe ich mir kann jemand helfen =)
Danke im Vorraus!
MfG Kiba |