Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

Question

I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping the column, the menu affixes to the top?

Also the column is overlapping the footer. Any help would be greatly appreciated. It seems that many people are having this same issue.

Here is the HTML:

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

Here is the CSS:

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

Banyan

Answer 1

Demo: http://bootply.com/104634

You should only apply the affix when the screen width is larger that 992 pixels (the breakpoint at which Bootstrap col-md-* starts vertically stacking).

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

Also, if you want to use the affix on smaller widths you could change your columns to col-sm-* or col-xs-*.

Add

That worked beautifully. What about the footer? The sidebar overlaps the footer. – Banyan

That's what affix-bottom is for: bootply.com/104641 -- See the Bootstrap docs: getbootstrap.com/javascript/#affix for more info. – Add

If it makes any difference, I am using wordpress, so in my theme I include the footer. – Banyan

I really appreciate the time you spent helping me. Have a great day, you helped me immensely. – Banyan

Answer 2

I wanted the affix to be responsive when resizing the columns so I came up with a pretty simple solution.

What we'll do is match the width of our affix to the width of the column it is in when the grid is resized.

To do this all you need to do is give your column and affix an Id. (Or someway to reference the elements with javascript)

I went for a javascript solution.

function fixAffix() {
    try {

        // Bootstrap affix will overflow columns 
        // We'll fix this by matching our affix width to our affixed column width
        var bb = document.getElementById('affixColumn').getBoundingClientRect(),
            columnWidth = bb.right - bb.left;

        // Make sure affix is not past this width.
        var affixElm = document.getElementById('affixDiv');
        affixElm.style.width = (columnWidth - 30) + "px";

        // We can also define the breakpoint we want to stop applying affix pretty easily
        if (document.documentElement.clientWidth < 975) 
            affixElm.className = "";
        else
            affixElm.className = "affix";

    }
    catch (err) {
        alert(err);
    }
}



$(window).resize(function () {
       fixAffix();
   });

$(document).ready(function () {
    fixAffix();
});

I've included code to remove the affix at a specified breakpoints. That's specific to my application, but you'll most likely want to do something like this too to stop the affix on smaller devices.

Farland