CSS Styling with Bootstrap

Question

I'm trying to make a static top bar in a Bootstrap-sass environment. Problem: Making top bar fixed while keeping it responsive. I've read CSS documents about inheritance and nested rules, but still unsure how to apply to this case.

Right now, my top bar is fixed to top, but it's not responsive.

CSS

.fixed_pos {
    position: fixed;
}

.flowing_body {
    margin-top: 100px;
}

Bootstrap CSS

// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

HTML

<div class="container-fluid">
    <div class="fixed_pos row-fluid">
      <div class="span9">//left long side of top bar</div>
      <div class="span3">//right long side of top bar</div>
    </div>
    <div class="row fluid flowing_body">
       <%= yield %>
    </div>
</div>

This is what I tried to add the responsive feature: CSS

.row-fluid .fixed_pos {
    position: fixed;
}

HTML

<div class="row-fluid"><!-- MENUS -->
  <div class="fixed_pos">
    //everything else the same
  </div>
</div>

But then the top bar is shrunk in size and still not responsive.

I appreciate any help with this. There's a very good reference here and I tried to solve it by myself but haven't succeeded yet: Link

score 4 · Accepted Answer · answered Dec 11 '12 at 06:09

This is how I solved the problem:

CSS

.row-fluid .fixed_pos {
    position: fixed;
    width: 80%;
}

View

<div class="container-fluid">
    <!-- TOP BAR, FIXED -->
    <div class="row-fluid">
        <div class="fixed_pos">
        <!-- MENUS -->
            <div class="span12">
                <ul class="nav nav-tabs">
</appropriate endings..>

Finally the top bar is fixed and responsive.

score 0 · Answer 2 · answered Dec 10 '12 at 05:57

0

Add this code in bootstrap-responsive.css

@media (max-width: 979px){
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;}
.container-fluid{ margin-top:70px;}
}

answered Dec 10 '12 at 05:57

Murali

136
3

1

Thank you, but it doesn't solve the problem. The top nav-bar's width seems to be shrunk when I put row fluid above the nav bar. – Maximus S Dec 10 '12 at 08:58

CSS Styling with Bootstrap

2 Answers2