How can I make the menu bar transparent on the Dawn theme?

[AZ2024]

Hello,

I am using Dawn theme.

How can I change the menu bar so that it is transparent and so that the homepage image covers the whole screen?

Thank you,

[DevDynamo]

Hey @AZ2024 ,

Please add the below-provided CSS code in the Global Custom CSS section:

.shopify-section-header-sticky .header-wrapper {
	background: #ffffff;
}

.header-wrapper {
	position: absolute;
	width: 100%;
	background: transparent;
}

Steps:

1. In your Shopify admin, go to Online Store > Themes.
2. Click Customize.
3. Click Theme settings.
4. Click Custom CSS.
5. Add the above-provided CSS code.
6. Click Save and Verify.

Thank You.

[AZ2024]

I have done this and it comes up with an error:

[DevDynamo]

Hey @AZ2024 ,

Please add the below-provided CSS code to Custom CSS if the previous code shows an error:

.scrolled-past-header .header-wrapper {
	background: #ffffff;
}

.header-wrapper {
	position: absolute;
	width: 100%;
	background: transparent;
}

Or, if it still shows an error, please add that CSS code to Online Store > Themes > Edit code > base.css.

Thank You.

[AZ2024]

Hi,

I added the code and it has somewhat worked but still shows a line where the footer ends. Please see image.

[DevDynamo]

Hey @AZ2024 ,

Are you trying to remove the header’s bottom border (line) as well?

If so, please add the below-provided code to the Global Custom CSS section:

.scrolled-past-header .header-wrapper {
	background: #ffffff;
}

.header-wrapper {
	position: absolute;
	width: 100%;
	background: transparent;
	border-bottom: 0;
}

Thank You.

[AZ2024]

When I do this it results in the ‘Products’ section overlapping the menu bar.

[DevDynamo]

Hey @AZ2024 ,

Please add the below-provided code to the Online store > Themes > Edit code > theme.liquid before tag to make these changes only on the homepage:

{% if template == 'index' %}

{% endif %}

Also, please remove the previously added code from the Global Custom CSS section, as it is no longer required.

Thank You.

[AZ2024]

Hi,

I did that and it hasn’t changed anything.

[DevDynamo]

Hey @AZ2024 ,

Sorry for the previous code. Please add the below-provided code to the Online store > Themes > Edit code > theme.liquid before tag to reflect the changes only on the homepage:

{% if template == 'index' %}

{% endif %}

Thank You.

[chloedesigner]

Hey @DevDynamo ,

Thank you for the solution! That code worked for making the navbar transparent only on the home page.

I have a few questions regarding this change:

1. How can we invert the color of the icon, nav links, and logo to make them white?
2. When the screen size is reduced and the navbar switches to a hamburger icon, is there a way to restore the white background for smaller screen sizes?

Thanks so much man!