Solved

how to only have a transparent menu on desktop?

christian_russo
Pathfinder
203 1 42

hi! 

 

I recently made my side menu transparent as you can see: 

Schermafbeelding 2022-05-09 om 09.01.50.png

but now on mobile it looks like this: 

IMG_4961.PNG

is it possible to only have it transparent on desktop and not on mobile?

 

www.gallerychristian.com

password: Christianshop123

 

thanks!

Accepted Solutions (2)

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@christian_russo ,

@media only screen and (max-width: 600px) {
nav.menu-drawer__navigation {
    background: #fff;
}
}

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@christian_russo ,

.menu-drawer__menu-item--active:hover {
    background: none;
}
.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background: none !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 9 (9)

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@christian_russo ,

@media only screen and (max-width: 600px) {
nav.menu-drawer__navigation {
    background: #fff;
}
}

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
christian_russo
Pathfinder
203 1 42

perfect! thank you! do you maybe also now how I make this fade smaller so it doesn't go over the pictures? Schermafbeelding 2022-05-09 om 09.01.50.png

oscprofessional
Shopify Partner
15905 2378 3087

@christian_russo ,

.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background: none;
    color: 0;
}

 

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
christian_russo
Pathfinder
203 1 42

but is it possible to make it smaller? because it's too big

oscprofessional
Shopify Partner
15905 2378 3087

@christian_russo ,

Please check the above solution.

Please give likes to my post!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
christian_russo
Pathfinder
203 1 42

it doesn't work it's still the same 😞

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@christian_russo ,

.menu-drawer__menu-item--active:hover {
    background: none;
}
.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    background: none !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
christian_russo
Pathfinder
203 1 42

thank you!

BrandBuilding88
Excursionist
29 2 6

transparent nav bars are tricky 

but add the class 

{% if section.settings.transparent %}navbar-transparent{% endif %}">


add settings
 {
            "type": "checkbox",
            "id": "transparent",
            "label": "Transparent navbar",
            "info": "Applies only on homepage",
            "default": true
        },