0
Ich versuche, eine komprimierte Navbar mit Bootstrap zu machen. Wenn ich jedoch die ausgeblendete Navigationsleiste "öffne", sind alle Elemente versetzt, anstatt übereinander gestapelt zu sein. Dies ist, wie es aussieht:Wie positioniere ich Elemente in einer komprimierten Navigationsleiste (Boostrap 3)?
Hier ist mein Code für die navbar ist:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-brand {
position: absolute;
transform: translateX(-65%);
left: 65%;
position: absolute;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
margin-left: 0;
}
@media (min-width: 34em) {
.navbar-brand {
float: left;
}
.navbar-nav .nav-item {
float: left;
}
.navbar-divider,
.navbar-nav .nav-item + .nav-item,
.navbar-nav .nav-link + .nav-link {
margin-left: 1rem;
}
}
/* Navbar collapse breakpoint */
@media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display:block !important;
}
}
/* Navbar styling */
#navbar {
height: 76.5px;
}
#navbarImg {
height: 60px;
position: absolute;
bottom: 20px;
top: 5px;
}
.navbar-brand {
margin: 0;
float: none;
text-align:center;
}
#navbar > .nav > .nav-item > .navbarButtonDiv > .nav-link {
position: relative;
font-family: "Bitter", serif;
color: Black;
font-size: 120%;
top: 14.5px;
outline: none;
text-decoration: none;
}
#navbar > .nav > .nav-item > .navbarButtonDiv {
margin-right: 50px;
height: 76.5px;
cursor: pointer;
}
#navbar > .nav > .nav-item > .navbarButtonDiv:hover {
background-color: #96D5FF;
transition: 0.2s;
}
#navbar > .nav > .nav-item > #navbarButtonDivHome {
position: relative;
width: 130px;
bottom: 7px;
right: 240px;
}
#navbar > .nav > .nav-item > #navbarButtonDivHome > a {
left: 39px;
top: 23px;
}
#navbar > .nav > .nav-item > #navbarButtonDivAbout {
position: relative;
width: 135px;
bottom: 7px;
right: 300px;
}
#navbar > .nav > .nav-item > #navbarButtonDivAbout > a {
left: 41px;
top: 23px;
}
#navbar > .nav > .nav-item > #navbarButtonDivLearn {
position: relative;
width: 135px;
bottom: 7px;
right: 360px;
}
#navbar > .nav > .nav-item > #navbarButtonDivLearn > a {
left: 41px;
top: 23px;
}
#navbarForm {
position: absolute;
left: 1150px;
top: 18px;
}
#navbarFormSearch {
width: 127%;
font-family:"Bitter", serif;
}
#navbarFormSubmit {
position: absolute;
height: 38px;
width: 46px;
bottom: 16px;
left: 285px;
}
#navbarFormSubmitFa {
position: absolute;
right: 14px;
bottom: 10px;
}
#navbar > #rightNavbar {
position: absolute;
left: 1600px;
}
#navbar > .nav > .nav-item > #navbarButtonDivLogIn {
position: relative;
width: 135px;
bottom: 7px;
right: 10px;
}
#navbar > .nav > .nav-item > #navbarButtonDivLogIn > a {
left: 40px;
top: 23px;
}
#navbar > .nav > .nav-item > #navbarButtonDivSignUp {
position: relative;
width: 135px;
bottom: 7px;
right: 65px;
}
#navbar > .nav > .nav-item > #navbarButtonDivSignUp > a {
left: 35px;
top: 23px;
}
#navbar > .nav {
position: relative;
left: 15.5%;
top: 7px;
}<nav class="navbar navbar-default navbar-static-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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active nav-item">
<div class="navbarButtonDiv" id="navbarButtonDivHome">
<a class="nav-link" href="#home">Home</a>
</div>
</li>
<!-- About -->
<li class="nav-item">
<div class="navbarButtonDiv" id="navbarButtonDivAbout">
<a class="nav-link" href="#about">About</a>
</div>
</li>
<!-- Search -->
<li class="nav-item">
<div class="navbarButtonDiv" id="navbarButtonDivLearn">
<a class="nav-link" href="#learn">Learn</a>
</div>
</li>
<a class="navbar-brand" href="#" id="navbarBrandImg">
<img src="images/edufeLogo.png" id="navbarImg">
</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Log In -->
<li class="nav-item">
<div class="navbarButtonDiv" id="navbarButtonDivLogIn">
<a class="nav-link" href="#logIn">Log In</a>
</div>
</li>
<!-- Sign Up -->
<li class="nav-item">
<div class="navbarButtonDiv" id="navbarButtonDivSignUp">
<a class="nav-link" href="#signUp">Sign Up</a>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Wollen Sie wirklich die Marke/das Logo in der kollabierten Navigation sein oder bleiben über dem kollabierten nav ausgesetzt? – vanburen
Ich denke, oben ausgesetzt. –