Header navigation color changes for specific page

Retired Boards Appdev Store Design
1

Trying to change the color of the nav menu just for the homepage in Shopify but couldn’t find any solution to it. I tried to call #MainContent(homepage) and header classes but nothing happened.

Using sense theme

2

Hi @a-moiz ,

You can change the background color of the header menu by following the instructions below

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code

  2. Open the Section folder, and find the header.liquid file.

  3. Find the <{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}

  4. After the {% endif %}, place the code below. Refer to image below

NOTE: Replace red to color of choice.

{% if template == "index" %}style="background-color: red"{% endif %}

made4Uo_0-1662407485899.png
made4Uo_0-1662407485899.png3055×1696 462 KB

  1. Make sure to click SAVE
3

It’s changing the background-color, all i want to is to change menu and icon color from black to white.

4

@a-moiz ,

Sorry I thought that is what you want

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Section folder, and find the header.liquid file.
  3. At the very top of the file, paste the code below

NOTE: Change the red to color of choice

{% if template == "index" %}

{% endif %}
5

Perfect, but it start messing up with my sticky header :disappointed_face: here’s the URL :https://azqikkm6d0zdsmsb-65315930369.shopifypreview.com

6

@a-moiz ,

If you have to be mindful on the color you are using. You can use the code below to change the background of your header

{% if template == "index" %}

{% endif %}
7

This code is not working as I wanted, I want the navigation menu to be black color when it scrolls down the background of the header remains the same.

8

Hi @a-moiz

Please replace the code provided with the code below. Same instructions. Thank you

{% if template == "index" %}

{% endif %}