change header color for homepage only (DAWN THEME)

[crepscity]

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 </head> tag: 

{% if template.name == 'index' %}
<style>
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;
}
</style>
{% 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.

[crepscity]

Any solutions for this ?

thank you in advance.