how to only have a transparent menu on desktop?

[christian_russo]

hi! 

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

but now on mobile it looks like this: 

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

www.gallerychristian.com

password: Christianshop123

thanks!

[oscprofessional · 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

[oscprofessional · 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

[christian_russo]

perfect! thank you! do you maybe also now how I make this fade smaller so it doesn't go over the pictures? 

[oscprofessional]

@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

[christian_russo]

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

[oscprofessional]

@christian_russo ,

Please check the above solution.

Please give likes to my post!

[christian_russo]

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

[oscprofessional · 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;
}

[christian_russo]

thank you!

[BrandBuilding88]

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
        },