How can I make my mobile nav bar sticky while keeping the hamburger menu?

Store Design
1

Hello Community,

I need helping getting my Nav Bar to stick for Mobile while keep the hamburger menu.

www.theballersbank.com

Any help would be appreciated! Thank you in advance.

1 Like
2

Hi @dev_beaux

I saw your store is using custom header for mobile. Therefore, you need custom development to make the mobile nav sticky.

Here’s a general guide to make it happen:

https://community.shopify.com/topic/518018

3

@dev_beaux

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media (max-width: 768px){
#shopify-section-header {
    position: sticky;
    top: 40px;
    z-index: 9;
}
}
1 Like
4

Appreciate the help. @KetanKumar 's solution worked perfectly.

1 Like
5

Thanks for your help! Solution worked great. Just had to adjust the margin to 30px because I had a banner on.

If possible, can you take a look at the section called “Baller Pulls Gallery” and see why the slider is disappearing for mobile? I’m using the same template at the main slider and that one isn’t going away in mobile view. I think the solution will be similar. Just don’t know what CSS properties to alter.

6

@dev_beaux

its my pleasure to help us