dawn theme header menu is white and header is white so menu not showing

learning12 · ‎05-28-2025

dawn theme header menu is white and header is white so menu not showing

in home page there is a banner image over the menu and menu color is white which is showing for all website other pages i want icons and menu to be black is it possible ?

Dan-From-Ryviu · ‎05-28-2025

Yes, the logo is smaller based on a mobile device. But you can update the code to this to make the logo bigger.

@media (max-width: 749px) {
    html header-drawer {
        justify-self: flex-end;
        grid-area: icons;
    }
    html .header__icons { margin-right: 48px; } 
    html .header {
        grid-template-areas: "left-icons heading icons";
        grid-template-columns: auto 1fr auto;    
    }
    html .header {
        padding: 6px 1rem;
    }
}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎05-28-2025

Please add this code to theme.liquid file, after <head> to do that

{% unless template == 'index' %}
<style>
.header__submenu .header__menu-item { color: #fff !important; }
summary.list-menu__item,
.header__icon .svg-wrapper,
.disclosure .disclosure__button,
.header__menu-item { color: #000 !important; }
</style>
{% endunless %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

@Dan-From-Ryviu

With this code the active page is still white and the on scroll buttons now not visible i have send you screen shot for both

Dan-From-Ryviu · ‎05-28-2025

Please update the code

{% unless template == 'index' %}
<style>
.header__submenu .header__menu-item { color: #fff !important; }
summary.list-menu__item,
.header__icon .svg-wrapper,
.disclosure .disclosure__button,
.header__menu-item { color: #000 !important; }
.scrolled-past-header summary.list-menu__item,
.scrolled-past-header .header__icon .svg-wrapper,
.scrolled-past-header .disclosure .disclosure__button,
.scrolled-past-header .header__menu-item { color: #fff !important; }
</style>
{% endunless %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

@Dan-From-Ryviu

on scroll its fixed but its still white the active page and how to add another black logo rt make this logo black so it can be visible

Dan-From-Ryviu · ‎05-28-2025

Update the code

{% unless template == 'index' %}
<style>
.header__heading-logo { filter: invert(1); }
.header__submenu .header__menu-item { color: #fff !important; }
summary.list-menu__item,
.header__icon .svg-wrapper,
.disclosure .disclosure__button,
.header__menu-item { color: #000 !important; }
.scrolled-past-header summary.list-menu__item,
.scrolled-past-header .header__icon .svg-wrapper,
.scrolled-past-header .disclosure .disclosure__button,
.scrolled-past-header .header__menu-item { color: #fff !important; }
.scrolled-past-header  .header__heading-logo { filter: invert(0); }
</style>
{% endunless %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

@Dan-From-Ryviu Now every thing fixed just now this one thing remainng on scroll now the logo shows black which needs to be white

Dan-From-Ryviu · ‎05-28-2025

Please remove a lank space in here, save your file and check again

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

@Dan-From-Ryviu on mobile we could stick the menu toggle to the top right corner instead of top left corner, is it possible

Dan-From-Ryviu · ‎05-28-2025

Do you mean like this?

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

@Dan-From-Ryviu no i want to move the toggle menu from left to right not the logo

Dan-From-Ryviu · ‎05-28-2025

Please add this code at the end of base.css file

@media (max-width: 749px) {
    html header-drawer {
        justify-self: flex-end;
        grid-area: icons;
    }
    html .header__icons { margin-right: 48px; } 
    html .header {
        grid-template-areas: "left-icons heading icons";
        grid-template-columns: auto 1fr auto;    
    }
}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

learning12 · ‎05-28-2025

Yes worked perfectly but now the logo become smaller

Dan-From-Ryviu · ‎05-28-2025

Yes, the logo is smaller based on a mobile device. But you can update the code to this to make the logo bigger.

@media (max-width: 749px) {
    html header-drawer {
        justify-self: flex-end;
        grid-area: icons;
    }
    html .header__icons { margin-right: 48px; } 
    html .header {
        grid-template-areas: "left-icons heading icons";
        grid-template-columns: auto 1fr auto;    
    }
    html .header {
        padding: 6px 1rem;
    }
}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Bundler-Manuel · ‎05-28-2025

Hey there @learning12

Go to online store > themes > Edit code > Find base.css file

Add to the given code at the bottom of the file base.css

.menu-drawer__navigation {
 
    background-color: white;
}
.header__submenu .header__menu-item {
   
    background-color: white;
}

Don’t forget to save changes!

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

learning12 · ‎05-28-2025

did not have any effect @Bundler-Manuel

hazilmia · ‎06-15-2025

I’ve run into a similar issue with the Dawn theme where the menu blends into the background, especially on image-heavy homepages. One approach that worked for me was using Shopify’s theme customizer to apply a conditional color scheme — you can set a transparent or white header on the homepage, then apply a different style (like black text/icons) on other pages by editing the header.liquid and using template checks.

You might also want to look at how other sites manage contrasting navigation styles. For example, this food ordering site uses a clean menu design that remains visible over images and solid backgrounds alike, which enhances usability.

If you’re comfortable with code, a small CSS or JavaScript snippet can detect scroll or page type and apply different classes to your header. Anyone else here tried dynamic header styling in Dawn successfully?

dawn theme header menu is white and header is white so menu not showing

dawn theme header menu is white and header is white so menu not showing

Community Blog Articles