Bootstrap Mobile Navigation Alignment

Question

I'm working on a site and need some help with the navbar. As you can see in the code pen I need help with vertical alignment of the li items and the logo and the toggle button. I also need help with an early breakpoint so the ul doenst overlap the image. I've tried like everything and I'm stuck.

http://codepen.io/anon/pen/yYvdBx?editors=001

NAV:

    <nav class="navbar navbar-default">
     <div class="container-fluid">
       <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a href="#"><div class="logo"></div></a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Stats</a></li>
        <li><a href="#">Drivers</a></li> 
        <li><a href="#">Contact</a></li>
        <li id="btn"><a href="#">Pledge Now</a></li> 
      </ul>
    </div>
  </div>
</nav>

Answer 1

You can add line height to the navbar then adjust your padding for the logo to vertically align everything.

As far as the early break point goes you just have to take the CSS for the mobile navbar and apply it to override at a new breakpoint which is noted with a comment in the example CSS.

*I've also added a custom class to your navbar ( custom-navbar in the example)in order to avoid directly changing Bootstrap CSS (esp with regards to the container class you're using) and in the event a change needs to be made in future, this will make it much simpler to maintain etc. This isn't necessary but good practice in general I feel.

**It may also be for alternative reasons but I used the navbar-fixed-top instead of wrapping the navbar in a fixed header class. Again, not necessary but maybe useful.

See example Snippet.

 body { padding-top: 120px; } .navbar.custom-navbar { background: red; border: none; border-radius: 0; margin-bottom: 0; /**Added Line Height**/ line-height: 100px; } .navbar.custom-navbar .container-fluid { padding: 0; width: 90%; margin: 0 auto; } .navbar.custom-navbar .navbar-header .logo { height: 45px; /**Adjusted Padding**/ margin-top: 27.5px; margin-bottom: 27.5px; width: 240px; background: url(http://castlehs.com/studentsites/kinsella/css/images/logo.png) no-repeat; background-size: contain; } .navbar.custom-navbar .navbar-nav > li > a { color: #FFF; font-size: 17px; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; position: relative; display: inline; padding: 0; margin-left: 10px; margin-right: 10px; text-transform: uppercase; } .navbar.custom-navbar .navbar-nav > li > a:hover, .navbar.custom-navbar .navbar-nav > li > a:focus { color: #66CCFF; -webkit-transition: .5s ease; -moz-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .navbar.custom-navbar .navbar-nav a:before { content: ""; position: absolute; width: 100%; height: 2px; margin-bottom: -10px; bottom: 0; left: 0; background-color: #66CCFF; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.15s ease-in-out 0s; transition: all 0.15s ease-in-out 0s; } .navbar.custom-navbar .navbar-nav a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } #btn a { border: 1px solid #FFF; padding: 10px; } #btn a:hover, #btn a:focus { color: #FFF; background-color: #66CCFF; border-color: #66CCFF; -webkit-transition: .5s ease; -moz-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } #btn a:hover:before { visibility: hidden; -webkit-transform: scaleX(1); transform: scaleX(1); } /* Small Devices, Tablets */ @media only screen and (max-width: 992px) { .navbar.custom-navbar { background-color: #84CF96; } .navbar.custom-navbar .navbar-header .navbar-toggle { border: 0; float: left; margin-left: 5px; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); margin-bottom: 0; } .navbar.custom-navbar .navbar-toggle:focus, .navbar.custom-navbar .navbar-toggle:hover { background-color: #6AA678; } .navbar.custom-navbar .navbar-toggle .icon-bar { background-color: #FFF; width: 25px; height: 4px; } .navbar.custom-navbar .navbar-header .logo { float: right; background-image: url(http://castlehs.com/studentsites/kinsella/css/images/logo.png); margin-top: 25px; height: 35px; width: 187px; margin-right: 10px; } .navbar.custom-navbar .navbar-nav { margin: 0; text-align: center; } .navbar.custom-navbar .navbar-nav > li > a { display: block; border-bottom: 1px solid #6AA678; margin: 0; height: 60px; line-height: 60px; } .navbar.custom-navbar .navbar-nav a:hover:before { visibility: hidden; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar.custom-navbar .navbar-nav > li > a:hover, .navbar.custom-navbar .navbar-nav > li > a:focus { color: #FFF; -webkit-transition: .5s ease; -moz-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .navbar.custom-navbar .navbar-nav > li:hover, .navbar.custom-navbar .navbar-nav > li:focus { background-color: #6AA678; -webkit-transition: .5s ease; -moz-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .navbar.custom-navbar .navbar-collapse.in { overflow-y: visible; margin-bottom: 20px; padding: 0; } .navbar.custom-navbar .navbar-collapse, .navbar.custom-navbar .navbar-form { border-color: #6AA678; } #btn { display: none; } /**Your Mobile Breakpoint CSS**/ .navbar.custom-navbar .navbar-header { float: none; } .navbar.custom-navbar .navbar-left, .custom-navbar .navbar-right { float: none !important; } .navbar.custom-navbar .navbar-toggle { display: block; } .navbar.custom-navbar .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar.custom-navbar.navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar.custom-navbar .navbar-collapse.collapse { display: none!important; } .navbar.custom-navbar .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar.custom-navbar .navbar-nav > li { float: none; } .navbar.custom-navbar .collapse.in { display: block !important; } .navbar.custom-navbar .navbar-nav .dropdown-menu > li > a, .navbar.custom-navbar .navbar-nav .dropdown-menu > li > a:hover, .navbar.custom-navbar .navbar-nav .dropdown-menu > li > a:focus { color: #777; } .navbar.custom-navbar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <nav class="navbar navbar-default custom-navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"> <div class="logo"></div> </a> </div> <div class="collapse navbar-collapse navbar-right" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">About</a> </li> <li><a href="#">Stats</a> </li> <li><a href="#">Drivers</a> </li> <li><a href="#">Contact</a> </li> <li id="btn"><a href="#">Pledge Now</a> </li> </ul> </div> </div> </nav> <div class="container"> <div class="alert alert-success">Yup</div> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div>