CODEWITHSUNDEEP
twitter-bootstrap
Cmnd
Cmnd

Reputation: 11

Bootstrap navbar fixed on scroll

I've been struggling on this issue for a while, so I thought I'd come to stackoverflow for help. My code: http://pastebin.com/H4PHdguq

Bascially, what I want to accomplish is that when you scroll down, the navbar sticks to the top of the page. (Becomes fixed) I've been unable to accomplish this through methods such as affix, probably because I've been doing it wrong(?)

Any help or input is appreciated!

Note: I've cut out the CSS styling because it isnt nesercarry towards the question. Also excuse the kinda messy code :).

Code

<header class="masthead">
  <div class="container" style="text-align:center;">
  <h2 class="enjoy-css" style="padding-top:10px    !important;">PIXELDESIGN</h2>
  <p style="color:white; font-family:Source Sans Pro; text-shadow: 2px 1px #222; font-size:18px">TEST</p>


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
 <div class="container">
        <div class="navbar-header">
          <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>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index.html">TEST</a></li>
             <li><a href="/portfolio.html">TEST</a></li>
                <ul class="nav navbar-nav navbar-right">
                <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php">  CONTACT ME    </a></li>


          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div><!-- /.navbar -->
  </nav>
</div>

<style>
body {
  min-height:2000px;
 }
</style>`

Upvotes: 0

Views: 2318

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282120

Well, using navbar-fixed top instead of navbar-static will solve your problem. I have created a jsfiddle to show that and its that simple. 

<div id="nav">
  <div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
        <div class="navbar-header">
          <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>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index.html">TEST</a></li>
             <li><a href="/portfolio.html">TEST</a></li>
                <ul class="nav navbar-nav navbar-right">
                <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php">  CONTACT ME    </a></li>


          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div><!-- /.navbar -->
  </nav>
</div>

Jsfiddle: https://jsfiddle.net/mayank_shubham/jzdhvfmv/

Upvotes: 0

sdfacre
sdfacre

Reputation: 1273

try navbar-fixed-top rather than navbar-static.

Upvotes: 1

Related Questions