CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
LeEnno
LeEnno

Reputation: 328

Bootstrap: using .affix with .navbar-right in Firefox

I'm trying to pin a navigation link in the upper right. This works great in Chrome and Safari, but not in Firefox (Update: also not in IE). I don't know if I'm doing something wrong or if it is a bug in FF.

Here's a bootply and the code:

HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li data-spy="affix" data-offset-top="40"><a href="#">Link fixed</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS:

body {height:1500px;}
.navbar-default .navbar-right>li>a {background:#333; color:#fff;}
.navbar-right .affix {position:fixed;}

Any ideas on this? Thank you.

Upvotes: 0

Views: 378

Answers (1)

James
James

Reputation: 4580

The reason is initially the link is static which is 16px(15px padding-right of .container-fluid + 1px border-right of .navbar) away from the right of the container. When the user scrolls downs and the link becomes fixed, the fixed position is set with respect to the page. You can try setting the below style and see it helps you, but i don't understand why Chrome and FF is behaving different.

.navbar-right .affix {
    position:fixed;
    right:16px;
}

Upvotes: 1

Related Questions