How to align navigation links after navigation menu is collapsed using bootstrap


Tags: html,css,twitter-bootstrap,alignment,navigationbar

Problem :

I have looked everywhere for this answer and can't seem to find anything that works. I am using bootstrap in my navbar, and the navbar collapses when the window is small. When it is collapsed and then opened via the button, the navigation links are centered and each of their respective drop down menu's align to the left of the page, so it doesn't function well. I need to get all of the links aligned to the left- but only in this view (I am using nav-justified for the alignment before the windows is collapsed). How do I do this without messing up my navbar in the larger view? Ideally I would like to do this by using html & css only.

Here is the jsfiddle

The html:

Comstar, inc. Internal Warehouse

 </head> <body>   <div class="container" id="page-container">

  <div class="header">            <div class="container">
          <a href="http://www.comstarinc.com/"><img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg"></a>
      </div> <!-- /.container -->         </div> <!-- /.header -->


<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav nav-justified custom">
      <li><a href="../index.html"><span class="glyphicon glyphicon-home"></span></a></li>
      <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">FedEx</a></li>
              <li><a href="#">UPS</a></li>
              </ul> <!-- /.dropdown-menu -->
      </li> <!--/.dropdown -->
      <li><a href="#">Testing</a></li>
      <li><a href="#">Packing</a></li>
      <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">Part Number</a></li>
              <li><a href="#">Ebay Number</a></li>
              </ul> <!-- /.dropdown-menu -->
      </li> <!-- /.dropdown -->
      <li><a href="#">Cleaning</a></li>
      <li><a href="#">Recieving</a></li>
      <li><a href="#">Location</a></li>
      </ul> <!-- /.nav .navbar-nav .custom -->


</div> <!-- /.collapse .navbar-collapse #myNavbar -->   </div> <!-- /.container-fluid #navbar-container --> </nav> <!-- /.navbar --> 



  <div class="jumbotron">             <div class="container">

          <h1 class="text-center">Comstar, inc. Warehouse</h1>

          <div class="container" id="jumbo-content">

          </div> <!-- .container #jumbo-content -->

      </div> <!-- /.container -->         </div> <!-- /.jumbotron -->

I can't yet post my css here but it is able to be seen in the jsfiddle.



Solution :

To left align the link and the dropdown on the mobile viewport, add this to your CSS.

@media (max-width: 767px) {
    .navbar .nav.custom > li > a:hover, .navbar .nav.custom > li > a {
        display: inline-block;
    }
}

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
#page-container {
  width: 100%;
}
/*Header*/

.header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 54px;
}
.header img {
  margin: 15px 0px 0px 57px;
  padding: 0px;
  height: 22px;
  width: auto;
  float: left;
}
.navbar {
  margin: 0px;
  padding: 0px;
  background-image: url("https://www.comstarinc.com/media/catalog/product/n/a/nav-bar-background.png");
}
#navbar-container {
  margin: 0px;
  padding: 0px;
}
.navbar .nav {
  margin-top: 5px;
}
/* Link Text Color */

.navbar .nav li a {
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Avenir LT W01 65 Medium';
  font-weight: normal;
  font-size: 13px;
}
.navbar .nav li a:hover {
  font-weight: bolder;
}
/* !Collapse button colors */

.navbar button {
  color: white;
  border: 1px solid white;
}
/* !Navbar background colors */

.navbar .custom > li > a:hover,
.navbar .custom > li > a {
  background-color: transparent !important;
}
/* Changes Nav- collapse button color */

.navbar .navbar-toggle .icon-bar {
  background-color: white;
}
/* Dropdown menu anchor background color */

.navbar .nav-justified > li > .dropdown-menu {
  background-color: #eaeaed;
}
/* dropdown menu background and text color */

.navbar .nav-justified > li > .dropdown-menu a:hover {
  background-color: #eaeaed;
  color: #002c66;
}
.navbar .nav-justified > li > .dropdown-menu a {
  color: #002c66;
}
/* Navbar Hover */

.sidebar-nav {
  padding: 9px 0;
}
.navbar .dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
.navbar .dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.navbar .dropdown:hover .dropdown-menu {
  display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}
.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
/*Jumbotron*/

.jumbotron {
  margin: -25px 0px 0px 0px;
  padding: 0px;
  background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 725px;
  border: none;
}
.jumbotron h1 {
  color: #ffffff;
  text-align: center;
  font-family: Arial;
  margin-top: 85px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .navbar .nav.custom > li > a:hover,
  .navbar .nav.custom > li > a {
    display: inline-block;
  }
}
<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>
<div class="container" id="page-container">
  <div class="header">
    <div class="container">
      <a href="http://www.comstarinc.com/">
        <img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg">
      </a>

    </div>
    <!-- /.container -->
  </div>
  <!-- /.header -->
  <nav class="navbar">
    <div class="container-fluid" id="navbar-container">
      <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>
      </div>
      <!-- /.navbar-header -->
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav nav-justified custom">
          <li><a href="../index.html"><span class="glyphicon glyphicon-home"></span></a>

          </li>
          <li class="dropdown">	<a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">FedEx</a>

              </li>
              <li><a href="#">UPS</a>

              </li>
            </ul>
            <!-- /.dropdown-menu -->
          </li>
          <!--/.dropdown -->
          <li><a href="#">Testing</a>

          </li>
          <li><a href="#">Packing</a>

          </li>
          <li class="dropdown">	<a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">Part Number</a>

              </li>
              <li><a href="#">Ebay Number</a>

              </li>
            </ul>
            <!-- /.dropdown-menu -->
          </li>
          <!-- /.dropdown -->
          <li><a href="#">Cleaning</a>

          </li>
          <li><a href="#">Recieving</a>

          </li>
          <li><a href="#">Location</a>

          </li>
        </ul>
        <!-- /.nav .navbar-nav .custom -->
      </div>
      <!-- /.collapse .navbar-collapse #myNavbar -->
    </div>
    <!-- /.container-fluid #navbar-container -->
  </nav>
  <!-- /.navbar -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="text-center">Comstar, inc. Warehouse</h1>

      <div class="container" id="jumbo-content"></div>
      <!-- .container #jumbo-content -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.jumbotron -->
</div>
<!-- /.container #page-container -->


    CSS Howto..

    How to ensure each DIV appears on it's own without overlapping

    how to base a css rule on inherited value of dir attribute

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How to change size to GtkWidget with CSS?

    How to set a width of the background (HTML and CSS)

    How do I refer to an image resource from CSS in grails?

    How to replace flex in this layout?

    Modal box doesn't show completely

    Fancyselect: How to force to open the selector at the bottom?

    How to override inline style dynamically?

    Horizontal navigation menu - how to increase size of
  • on hover
  • Fuelux, how to fix the width of a repeater column

    How do I use CSS and JS files within a HTML file being sent with Express?

    How to add wikipedia in to a wordpress plugin

    JavaFX how to apply CSS theme

    How do I create a full-width bar on a web page?

    How to align multiple images horizontally (in a row)?

    How To Add CSS & JavaScript Into Windows Form Application C#.net

    How to apply a defined class to a new class in my css?

    How to bound CSS3 animation to class

    element doesn't show padding in Opera, Safari, IE

    How to break a overflowed navigation bar via CSS

    How to test for existence of CSS class in JavaScript without jQuery?

    How to specify another font size for IE7 and IE8

    How do I get the tooltip background to extend or grow as I input more text?

    How to use toggle css classes on an element onclick?

    CSS: how to make margin: 0px auto work

    How do I center my search form within a div?

    How to target a specific div out of 4 divs with the same class with CSS

    How to target entire Bootstrap navbar