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

Started by rvalani, October 11, 2016, 04:36:10 PM

Previous topic - Next topic

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


abantecart

Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

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?
Thank you...
G.O.

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! ????

Forum Rules Code of conduct
AbanteCart.com 2010 -