R. Chan R. Chan - 6 months ago 11
HTML Question

How do I position elements in a collapsed navbar (Boostrap 3)?

I am trying to make a collapsed navbar with bootstrap. However, when I "open" the collapsed navbar, all of the elements are out of place, instead of stacked on top of each other.
This is what it looks like:

..

Here is my code for the navbar:



@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>




Answer

The easiest way to go about this may be to just leave the navbar-brand in it's default placement (inside the navbar-header) and work around it with media queries. This way it's always exposed regardless of the viewport size.

Working Example:

@import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
 body {
  padding-top: 100px;
}
.navbar {
  font-family: 'Bitter', serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 200px;
  text-align: center;
  padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
  margin-left: -100px;
}
.navbar .nav.navbar-nav {
  font-size: 150%;
}
@media (min-width: 768px) {
  .wrapper {
    padding-right: 15px;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    line-height: 60px;
    transition: background 200ms linear;
  }
  .navbar.navbar-custom .navbar-nav > li > a:hover {
    background: #96D5FF;
  }
}
@media (max-width: 767px) {
  .navbar.navbar-custom {
    padding: 20px 0;
  }
  .navbar.navbar-custom .navbar-collapse {
    margin: 20px 0 -20px;
    border: none;
    box-shadow: none;
  }
  .navbar.navbar-custom .navbar-nav > li > a {
    text-align: center;
  }
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
  <div class="wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <a class="navbar-brand navbar-brand-centered" href="#/">
      <img src="http://placehold.it/200x90/96D5FF/000?text=LOGO">
    </a>

    <div class="collapse navbar-collapse" id="js-navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Learn</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log In</a>
        </li>
        <li><a href="#">Sign Up</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container">
  <div class="well">Yup</div>
</div>