Hi there,
I want to change the header color for mobile and desktop view to ‘Black’ for *homepage only and the other pages to remain as the default color of dawn theme which is ‘White’ and showing a 1px white border line under the header for homepage and 1px black grid line on other pages.
I followed these steps below:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
{% if template.name == ‘index’ %}
sticky-header.header-wrapper { background-color: black; } .header__heading a.header__heading-link { filter: invert(1); } li.gm-item.gm-level-0.gm-has-submenu.gm-submenu-dropdown, .gm-menu-installed .header__inline-menu .gm-submenu.gm-dropdown.gm-orientation-vertical { background-color: black !important; } .gm-menu-installed .header__inline-menu li.gm-item.gm-level-0.gm-has-submenu.gm-submenu-dropdown .gm-text { color: #ffff !important; } body.gm-menu-installed .gm-menu.gm-menu-32270 li.gm-item.gm-level-0.gm-has-submenu.gm-submenu-dropdown.gm-submenu-align-center, body.gm-menu-installed .gm-menu.gm-menu-32270 li.gm-item.gm-level-0.gm-has-submenu.gm-submenu-dropdown.gm-submenu-align-left { border: none !important; }{% endif %}
But these issues came up afterwards:
-
The white hover effect on the menus is still there and needs to be removed. It doesn’t fit with the design and is making things look off.
-
The dropdown menu arrows are still invisible because they’re black, and the background is also black. They need to be changed to white color.
-
The ‘Accessories’ menu now has a full white border or background that covers the entire item, which shouldn’t be happening. This needs to be fixed so it aligns with the rest of the design.
