CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
micky
micky

Reputation: 317

Using bootstrap affix class

I am using bootstrap affix class. This is the contents at the top.

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>SUBISU</h1>
  <h3>Amazing all the way</h3>
  <p>The first internet and coaxial cable distribution of Nepal.</p>
</div>

And this is the navbar to be fixed at top after scrolling through the contents at the top.

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="facilities.php">Facilities</a></li>
    <li><a href="work.php">Works</a></li>
    <li><a href="contact.php">Contact us</a></li>
  </ul>
</nav>

everything is fine upto here and when i scroll down the navbar remains fixed at the top but the contents below the navbar becomes visible at the top beneath the navbar when scrolled down. i mean the navbar is not fully opaque.

this is css:

.affix {
      top: 0;
      width: 100%;

  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

some contents after navbar:

<div class="container-fluid" style="height:1000px">
<div class="row"> 
    <div class="col-sm-2">
<table border="1" class="table table-hover table-striped">

<thead><tr><th> <h3>Cables Available<span class="badge badge-warning">5</span></h3></th></tr></thead>

 <tbody><tr><td> Coaxial</td></tr>
<tr><td class="text-success"> Copper wire</td></tr><tr><td class="bg-warning"> Fiber optical cable</td></tr><tr><td class="danger"> RJ45</td></tr><tr><td> BTS cable</td></tr>
</tbody>
</table>
    </div>

Upvotes: 0

Views: 1304

Answers (1)

Kaushal Suthar
Kaushal Suthar

Reputation: 420

Hi your code work fine for me.

I've used following code

CSS 

  .affix {
      top: 0;
      width: 100%;
  }


  .affix + .container-fluid {
      padding-top: 70px;
  }

HTML 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>SUBISU</h1>
  <h3>Amazing all the way</h3>
  <p>The first internet and coaxial cable distribution of Nepal.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="facilities.php">Facilities</a></li>
    <li><a href="work.php">Works</a></li>
    <li><a href="contact.php">Contact us</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

Try above code and it will work.

Upvotes: 1

Related Questions