Change font color on home page dropdown menu ONLY (on desktop and mobile)

[artiisque]

Hello, I am looking to only change the color of the dropdown menu font on the home page, and not have it show  anywhere else on my website. I added a custom code that changed my header fonts to white on the home page only, but it also changed the color of my dropdown menu font in the home page. Is there any way to make the dropdown menu font color the same as the dropdown menu font color for the rest of my store? My theme is Dawn version 13.0.0 and website is goldengreenobsession.com.

Here is the custom code I used in theme.liquid that changed my header font color and dropdown menu font color in the home page:

{%- if request.page_type == 'index' -%}

  <style>
    header * {
      color:white !important
    }
    header {
      font-size:12px !important
    }
  </style>

{%- endif -%}

This is how my home page dropdown currently looks:

This is how I want it to look, with the normal green text (but still keep the white header font in the home page):

Any advice on what I can do to get this result would be greatly appreciated. Thank you!

[ThePrimeWeb · Accepted solution]

Hey @artiisque,

Just replace the code with this

{%- if request.page_type == 'index' -%}

  <style>
    header-menu summary,
    .list-menu > ul > li > .header__menu-item ,
    .header__menu-item span,
    .header__icons * {
      color: white !important;
    }

    header {
      font-size:12px !important
    }
  </style>

{%- endif -%}

[ThePrimeWeb · Accepted solution]

Hey @artiisque,

Just replace the code with this

{%- if request.page_type == 'index' -%}

  <style>
    header-menu summary,
    .list-menu > ul > li > .header__menu-item ,
    .header__menu-item span,
    .header__icons * {
      color: white !important;
    }

    header {
      font-size:12px !important
    }
  </style>

{%- endif -%}

[artiisque]

This worked like a charm, thank you so much!!

[artiisque]

Hello again, I just noticed that the drawer on the mobile version is no longer white, so it’s hard to see. How do I change it back to white please without affecting the drawers? Thank you. 

What  it looks like now on mobile: 

[ThePrimeWeb · Accepted solution]

Hey @artiisque,

You can replace the previous code with this

{%- if request.page_type == 'index' -%}

  <style>
    header-menu summary,
    .list-menu > ul > li > .header__menu-item,
    .header__menu-item span, .header__icons *,
    summary.header__icon {
      color: white !important;
    }

    header {
      font-size:12px !important
    }
  </style>

{%- endif -%}

[artiisque]

This worked even better, thank you so much!

[dodo06]

it worked perfectly!!!