Sticky Nav Bar and 2 Products Per ROWS on Mobile

New Member
5 0 0

Hi there,

I'm using Masonry theme for our shop now.


I would like to add the Navigation Bar on the mobile version of my store to be fixed/sticky, The navigation bar is already sticky in computer version, but not in the Mobile version:


I would also like to change one product to two per row in the Collections page in Mobile version:


Please help me out,Thank you very much!

Shopify Partner
1838 170 528

Hi Pauline,


Masonry theme is a commercial theme and as such it really makes it difficult for anyone on public forums to support you. We simply cannot peek in to the source code of your theme to offer you solutions to your questions. It's also a little against the ethos IMO - someone buys a commercial theme, theme vendor profits, but the volunteer community helps out do the tricky stuff for free ;-)


So to cut my bla bla short, I'd first suggest you ask the theme vendor to support you. Most of them offer support and are quite happy to help.


Other than that, making navigation or any element fixed / sticky is typically just a matter of adding

    position: fixed;
    top: 0;
    width: 100%;

to the correct element in CSS. In your case that'd be .page-header__inner class div. Make sure it's on the mobile view breakpoint only. The other bit, since you make one element fixed and thus pull up all others, is to push those others down again. So you add

    margin-top: 60px;

on a container element. In your case .page-header div and again making sure it's only for mobile breakpoint.


As for items per row, maybe the theme has a setting for how many items per row to display in collection pages. If not, it really is up to the theme author to help you because they aren't using a typical grid layout, but the masonry layout.


Best wishes!

I turn coffee in to code - since 1998