Mobile banner transparent Origin theme

Store Design
, , ,
1

I need help making my mobile banner transparent. I was able to make the desktop view transparent but now need help on mobile.

2

To make the mobile banner transparent, you can add custom CSS targeting the mobile view. Here’s a general approach to get you started:
Add Media Query for Mobile Devices: Use CSS media queries to apply the transparency only on smaller screens. Add this code in your theme’s CSS file (e.g., theme.css or style.css), or in the “Custom CSS” section in your theme settings.

/* Example media query for screens less than 768px */
@media only screen and (max-width: 768px) {
.your-banner-class {
background-color: transparent !important;
}
}

3

Hi,

Please share your preview link to the site as community members don’t have access to your site.

4

Password: aldore

5

Hi,
Ok so it seems easy, in mobile your transparent is not working because your main section is display below nav section, but you need to display the main section under the nav section. So to do that you need to change nav section position property and background property:

Find following code, may be in theme.liquid or somewhere:

@media screen and (max-width: 767px) {
    .section-header .header {
        background: #fff !important;
        position: static;
        width: 100%;
    }
}

and change it to:

@media screen and (max-width: 767px) {
    .section-header .header {
        background: transparent !important;
        position: absolute; 
        width: 100%;
    }
}
6

Thank you Kevin!