BootStrap 3.1.1 NavBar

0
votes

Below is the link to my current implementation of Navbar using bootstrap 3.1.1.

  1. I have used container class to all Nav also. is it the correct implementation ? if I don't use container class to nav, it exceeds the width of Container. So I had to use it. Can someone please confirm whether its the right implementation?

  2. When I click on any button, the MainContent Child div's Slide up or Slide Down, once it crosses the Nav bar. I want it to be hidden (Scrolling div which you see above the Nav Bar), but its not hiding. I've tried to add one more div above Nav, but even that exceeeds the width of container though its inside container. So I've tried to use container class for that also, it worked fine but when I resize my browser to small size that div disappears and again I am able to see mainContent child item moving able the Nav bar.

HTML

<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
   <head>

   </head>
   <body>
   <div class="container">  
    <div id="header">
      <nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
          <div class="container inside-bar">  
                 <ul class="nav navbar-right">
                    <li class="active"><a href="#about">About</a></li>
                    <li><a href="#Services">Services</a></li>
                    <li><a href="#OurStaff">Our Staff</a></li>
                    <li><a href="#book">book</a></li>
                    <li><a href="#Gift">Gift Cards</a></li>
                    <li><a href="#Reviews">Reviews</a></li>
                 </ul>
          </div>  
        </nav>
    </div>
          <div id="mainContent">
            <div id='Services' class="box">
               Services
            </div>
            <div id='about' class="box">
               About
            </div>
            <div id='OurStaff' class="box">
               Our Staff
            </div>
            <div id='book' class="box">
               book
            </div>
            <div id='Gift' class="box">
               Gift
            </div>
            <div id='Reviews' class="box">
               Reviews
            </div>
         </div> 
      </div>
   </body>
</html>

Currently in the link you will not see the Div which I added before Nav.

http://codepen.io/anon/pen/DmiGs

1
htmlcsstwitter-bootstraptwitter-bootstrap-3
Do you want to hide the navbar when it scrolls down? - AyB
@ICanHasKittenz No. i want one div to be there above Navbar, which hides the Scrolling Div. In the Current Implementation if you see, when clicked on Our Staff you see "About Div" above the Nav bar, if i add one more div above navbar say header and give the height and class container which seems to be working fine, but problem is when i resize this div disappears. - user3027865

1 Answers

0
votes

  1. you can add container . Implementation is ok

  2.  .navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}