Search code examples
htmlcsstwitter-bootstrapnavbar

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>

Solution

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