some tricks for fixed navbar and displaying products according to screen size

[rvalani]

Hi guys,
I just wanted to share a small hack where you can change the view of products listed on your website..
For responsiveness if you want when user is on tablet rather than displaying four products we can display three products in one row and for mobile view if you want two products in one row then change the following:
/storefront/view/default/template/blocks/product_list.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
/storefront/view/default/template/pages/product/product_listing.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">

If you want your navbar to stay on-top always then modify the following line:
/storefront/view/default/template/common/header.tpl line#2 <div class="headerstrip navbar navbar-inverse" role="navigation"> to <div class="headerstrip navbar navbar-inverse navbar-fixed-top" role="navigation">

Note: Do take backup before you try this..
If you have any doubts feel free to write here I will be more than happy to help you

[Basara]

Hi.
Thanks for sharing

[abantecart]

good trick!

[G. O.]

I tried this on v.1.4.1 but doesn't worked. how to make the "fixed-top" become active in this case?

[jamimays8]

.navbar-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

[Freddieblakes]

Thanks heaps for sharing this! Extremely handy wee adjustment — I've been looking to tinker with the product layout for better responsiveness, and this is just the ticket. And much appreciated too for the reminder to save first (always a good habit but easy to forget). That navbar tip is a lovely extra bonus as well. Thanks for sparing the time to share this — very much appreciated! ?