how to keep the dropdown menu on mobile view at the top of the screen whle scrolling

pfn1993
Tourist
33 0 2

hello, im trying to improve the look of my website on mobile view.

im using Brooklyn theme for my shop and wanted to make the dropdown menu on the top of the screen is still there while scrolling to the bottom of the web.

can someone help?

my website is yourpafon.com

and second question, can i make my products view on mobile to be grid view?

because for now, the view is individual products per scroll. thankyouu

WhatsApp Image 2020-11-21 at 10.43.00.jpeg

Replies 11 (11)

oscprofessional
Shopify Partner
15834 2369 3072

 

@media only screen and (max-width: 600px) {
.grid__item.grid-product.medium--one-half.large--one-third {
    width: 50%;
}
}

 

Hello this code is for product grid,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid


for the menu it will be as like this, unless you cross button.what do you mean exactly

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
pfn1993
Tourist
33 0 2

thank you.

 

 for dropdown, i mean, if i scroll to the footer menu on mobile, i want to freeze the logo and navigation menu, to be always on the top of the screen. for now, if i go to footer and want to click on navigation, i need to scroll back to the top of the web.

oscprofessional
Shopify Partner
15834 2369 3072

oscprofessional_0-1605934687930.png

It will be like this if you keep transparent background, the menu will be hide

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
pfn1993
Tourist
33 0 2

yes. how to make that happen? thankyou so much

oscprofessional
Shopify Partner
15834 2369 3072

Add this css

@media only screen and (max-width: 600px){
.header-wrapper--transparent .site-header {
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    transition: padding-top 0.3s linear;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
pfn1993
Tourist
33 0 2

hello, where to add this css?

oscprofessional
Shopify Partner
15834 2369 3072

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
pfn1993
Tourist
33 0 2

thankyou! i tried already, but it works on homepage only. is there any other way to freeze it also on producst and any other pages?

wittwendy
Tourist
8 0 2

I would like to know also. 

JimWatts
Excursionist
36 2 2

@oscprofessional 
I messaged you privately. Thanks for all your help! This is a great solve!

wittwendy
Tourist
8 0 2

Why privately? Some of us need the answer as well