Transparent Announcement Bar Issue - Dawn Theme

[Marcus4411]

Hello Shopify Community,

Long story short I want to make my announcement transparent, I have tried a couple of times with different types of code, only one solution worked (kind of), but the only way it worked was to make the margin -65px, but this screwed with the whole website and made everything cropped in the top towards the header, therefore this was not a solution I could use for anything (The code I used is listede below).

I really need some help with what I can do to make the announcement transparent on my site https://ittiba.dk without messing up the margin or the rest of the pages, as I have tried every solution I could find on other posts, and I have tried to solve it myself but without any succes.

This was the code i used in the theme.liquid file:

main#MainContent { margin-top: -65px; } .utility-bar.color-background-2.gradient { background: transparent; }

I have removed the code now as it messed up the product pages, policy pages and almost every other page, by cropping it a lot.

Thank you in advance.

Kind regards,

Marcus Lindehammer

[Moeed]

Hey @Marcus4411

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

{% if template == 'index' %}

{% endif %}

This code will only work on your home page.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Marcus4411]

@Moeed I still have an issue with the mobile version cropping the top of the announcement bar, as you can see on the following picture, how can i adjust the code to not create this issue for users on other formats:

[websensepro]

Hi. @Marcus4411 .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

@media (min-width:320px) and (max-width:767px) {

.videoBackground .fullscreen-video-wrap {
    top: -80px;
}

}

Mobile-Result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

[Marcus4411]

Hey @Anonymous this didn’t work and didn’t show any difference on mobile version

[Marcus4411]

@websensepro **

[websensepro]

Please Send me your mobile screen shot and CSS file.

[Marcus4411]

Which file do you want css code from?

[websensepro]

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

This code.

@media (min-width:320px) and (max-width:767px) {

.videoBackground .fullscreen-video-wrap {
    top: -80px !important;
}

}

And tell me the code is working.

Thanks!

[Marcus4411]

@websensepro This moved the collection showcase on mobile move down which is due to the movement of the -80px margin, which makes the page looks weird, it worked thank you, but can you help me with making deleting the new space between the video and the collection on the homepage on mobile

[websensepro]

Ok , Appy this code,

@media (min-width:320px) and (max-width:767px) {

.videoBackground .videoBox {
    margin-bottom: -60px !important;
}
}

Result:

And tell me how shows on your mobile screen.