I want the dawn header to be transparent

Store Design
1

Don’t make it a sticky header.
I just want the header to be transparent.
I also want to keep the header white when I open the menu.

I would be grateful if anyone could help.
Thank you.

https://www.onyourmark.online/

2

@onyourmark ,

I have checked your store,

.header-wrapper.color-background-1.gradient {
  background-color: transparent;
}

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

oscprofessional_0-1654841251180.png
oscprofessional_0-1654841251180.png1551×757 147 KB

3

Thank you for your reply.
Also, I’m sorry that the explanation is not enough.

I tried the code below, but the header became transparent, but it became fixed when scrolling, and the header part of the menu also became transparent.

  • Currently, the code is erased.

.header-wrapper {position: absolute; background: transparent; width: 100%;}
.shopify-section-header-sticky .header-wrapper {
background: # B29B79;
}

Therefore, I want to make the header transparent but not fixed.
The part you want to make transparent is circled in red.

onyourmark ~ Dawn 価格透明_top戻B_GTM_GA4_FB_yahoo_tikt_g_animati...をカスタマイズする ~ Shopify - Google Chrome 2022_06_10 15_03_45_LI (2).jpg
onyourmark ~ Dawn 価格透明_top戻B_GTM_GA4_FB_yahoo_tikt_g_animati...をカスタマイズする ~ Shopify - Google Chrome 2022_06_10 15_03_45_LI (2).jpg692×902 48.5 KB

4

@onyourmark

Hello Admin,

Like this you want in your store.

Angel95_0-1654841774825.png
Angel95_0-1654841774825.png1067×657 122 KB

5

Thank you.

Unfortunately, I couldn’t find [base.scss.liquid] …
Since there was [base.css], I tried to enter the code I received, but there was no change.

Where should I enter the code if [base.scss.liquid] does not exist?

6

any update on how to do this

7

@onyourmark
Hello,

.header-wrapper.color-background-1.gradient {
	background: transparent !important;
}

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

Check Screenshot

oscprofessional_0-1666266873770.png
oscprofessional_0-1666266873770.png1527×869 263 KB

8

Hi

still not working - iv tried on both taste and dawn theme

its only working for the sticky heading

its transparent when your scroll - however logo/menu bar still showing with background when not scrolling ?

i want this bar to show as transparent with the image in the first section - which is set up as a slideshow

these are the settings within header

colour scheme - selection must be made ( back i make any of these colours within theme setting transparent ??

logo image - is brand logo within admin

desktop logo view - is top center

menu selection = main menu

desktop menu type - dropdown menu

enable sticky header is selected

show seperator line - not selected

any other suggestions ? thanks