I have a Page in Rails which has 4-5 tabs. Each tab renders a partial (say a page). I want to be able to keep the tabs fixed on the screen at the top or some margin from the top, even though a user scrolls down. I have used Bootstrap's <ul class="nav nav-tabs"> for tabs.

I have a Page in Rails which has 4-5 tabs. Each tab renders a partial (say a page). I want to be able to keep the tabs fixed on the screen at the top or some margin from the top, even though a user scrolls down. I have used Bootstrap's <ul class="nav nav-tabs"> for tabs.

• javascript
• html
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow asked May 4, 2017 at 13:02 the railslearnerthe railslearner 10111 gold badge11 silver badge1010 bronze badges 2

• stackoverflow./questions/23020763/… – mxr7350 Commented May 4, 2017 at 13:04
• I have already read it, and tried. The scrolling content overlaps the tabs. – the railslearner Commented May 4, 2017 at 13:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Add class navbar-fixed-top to nav ul

@media
only screen and (your condition)
{
 [class*="nav-tabs"] 
  {
    position: fixed;
    z-index: 9;
    background-color: #fff;
    margin-top: -11%; // adjust according to your need
  }
  // you are probably gonna mess up tab-content margin as well, so adjust it as I have shown below
  [class*="tab-content"] 
  {
    margin-top: 5%; // insert n% as per your need
  } 
}