How can I disable Bootstrap's “affix” on smaller screens?

Question

I\'m using the affix component in a site for a navbar and would like to disable it on smaller screens. I\'m using the jquery method vs. the data and can\'t figure out how to tur

Answer 1

You can do it the same way like they do on the Bootstrap page, with CSS alone. Use @media queries to detect the screen size and don't set the position to fixed if the screen is below a certain size. For example:

@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}

This rule will only have an effect if the screen width is more than 768px.

You can also do it vice versa, set the element's position explicitly to static if the screen has smaller than a certain size:

@media (max-width: 767px) {
    .affix {
        position: static;
    }
}