0

I'm learning bootstrap and creating a website from scratch and currently I have problems with this example because the nav bar is over the text, What I want to do is to start the text after the nav bar.

Code:

<body>
<!-- Navigation Menu-->
 <div class="container">
 <nav class="navbar  navbar-inverse  navbar-fixed-top">

  <button type="button" class="navbar-toggle"
  data-toggle="collapse"
  data-target=".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>

   <a class="navbar-brand" href="index.html">Testing Tool</a>
       <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
             <li class=""><a href="transmissionpackage.html">Option 0</a> </li>
             <li> <a href="">Option 1</a> </li>
           </ul>
       </div>

</nav>
</div>

<!-- Header -->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <h1 class="name">Start Bootstrap</h1>
                        <hr class="star-light">
                        <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
                    </div>
                </div>
            </div>
        </div>
</body>

Expected result:

  1. NAV BAR
  2. SECOND CONTAINER
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
Ivan Valdes
  • 1

2 Answers2

0

Here you go with a solution https://jsfiddle.net/7gg44938/

.container:nth-child(2){
  margin-top: 55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation Menu-->
 <div class="container">
 <nav class="navbar  navbar-inverse  navbar-fixed-top">

  <button type="button" class="navbar-toggle"
  data-toggle="collapse"
  data-target=".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>

   <a class="navbar-brand" href="index.html">Testing Tool</a>
       <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
             <li class=""><a href="transmissionpackage.html">Option 0</a> </li>
             <li> <a href="">Option 1</a> </li>
           </ul>
       </div>

</nav>
</div>

<!-- Header -->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <h1 class="name">Start Bootstrap</h1>
                        <hr class="star-light">
                        <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
                    </div>
                </div>
            </div>
        </div>
</body>

I would suggest you to use container-fluid class instead of container

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
0

Assuming you have the fixed-top navbar on multiple and all pages throughout your site, I suggest adding padding to the top of the body that's the same height as your navbar, rather than to a container class. So if your navbar is 55px, for instance, add to your CSS:

body {
  padding-top: 55px;
}

This will allow that space compensating for the navbar to persist everywhere. Note that you'll want to add a media query for a change in padding amount if the navbar height changes when it collapses on mobile.

AnnieP
  • 350
  • 1
  • 6
  • 13