I recently installed Cartthrob version 2.70. I used the auto-install templates during installation and have been altering them to suit my needs from there but I can't seem to fix a problem with the store's left nav (the div that includes the total, subtotal, discounts, etc.) When the store is viewed on a tablet or mobile device, this left nav follows the page as you scroll down and completely overlaps the content underneath it.

I'm new to Bootstrap but all my research and reading has lead me to believe that the issue has something to do with Affix. I assumed if the screen width was small enough, the div wouldn't scroll and would remain fixed at the top of the page. I'm also not sure if the problem is on the css or javascript side (or both). Has anyone else noticed the same issue and if so, is there an easy resolution? Thank you!

1 Answer 1


I was able to solve this problem with a better understanding of how Scrollspy and Affix work. I didn't realize that you needed to account for smaller screen sizes within the CSS. Adding this to my stylesheet solved my problem:

@media (min-width: 768px) {
    .bs-docs-sidenav {
        position: fixed;

The answer came from this thread: https://stackoverflow.com/questions/17394854/how-can-i-disable-bootstraps-affix-on-smaller-screens

Hope this helps someone else!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.