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 ?
Please add this code to theme.liquid file, after to do that
{% unless template == 'index' %}
{% endunless %}
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!
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
did not have any effect @Bundler-Manuel
Please update the code
{% unless template == 'index' %}
{% endunless %}
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
Update the code
{% unless template == 'index' %}
{% endunless %}
@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 on mobile we could stick the menu toggle to the top right corner instead of top left corner, is it possible
@Dan-From-Ryviu no i want to move the toggle menu from left to right not the logo
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;
}
}
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?