Solved

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

artiisque
New Member
7 0 0

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:

 

artiisque_0-1708188461868.png

 

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

artiisque_1-1708188524241.png

 

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

 

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1799 508 378

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1799 508 378

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1799 508 378

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
artiisque
New Member
7 0 0

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

artiisque
New Member
7 0 0

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: 

 

artiisque_0-1708193199544.jpeg

 

 

 

ThePrimeWeb
Shopify Partner
1799 508 378

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
artiisque
New Member
7 0 0

This worked even better, thank you so much!