Bootstrap adding container class ruins navigation

Question

Bootstrap adding container class ruins navigation active and hover states im not using responsive utilities or grid system i have downloaded customize bootstrap here are the results with and without container class. the first image is from the Photoshop the design......

.navbar {
    margin: 0;
    padding: 0;
    border-radius: none !important;
}

.navbar-default {
  background-color:#009c82;
  background-image: none;
  background-repeat: no-repeat;
  border-radius: none !important;
  border: none;
 }

@media (min-width: 768px) {
  .navbar {
    border-radius: none !important;
  }
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background: #fff;
    color: #333;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    text-shadow: none;
}


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #333;
    box-shadow: none;
    text-shadow: none;
    background: #fff;
}

.dropdown-menu > li > a {
    padding: 10px 20px;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background: #fff;
}

<nav class="navbar navbar-default navbar-static-top">
            <div class="navbar-inner">
           <div class="container-nav">
               <ul class="nav navbar-nav">
                    <li class="active"><a href="">Home</a></li>
                    <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="">History</a></li>
                            <li><a href="">District Council Khairpur</a></li>
                        </ul>
                    </li>
                    <li><a href="">Departments</a></li>
                    <li><a href="">Procurements</a></li>
                    <li><a href="">Citizen Complaints</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </div>
            </div>
        </nav>

Mister Moody Mister Moody · Accepted Answer · 2017-10-04T19:38:36

I do not know if you ever resolved this issue, but in my experience using Bootstrap, you do not use a container with the <nav>. In your case, I would have removed the <div class="navbar-inner"> and the <div class="container-nav">.

Bootstrap adding container class ruins navigation

1 Answers