How to change color of header menu on Homepage and Other Pages

#Option 1. Use CSS code

To change the color of the Header menu on the Homepage, you can use this code to Website Tools > Custom CSS.

body.homepage div.header-nav-item>a {
    color: #fff !important;
}

To change the color of the Header Menu on Other Pages, you can use this CSS code.

body:not(.homepage) div.header-nav-item>a {
    color: #f1f !important;
}

#Option 2. Use Site Styles

First, you can edit the Site Header

Click Edit Design

Click Color, choose Solid > Then you can change Navigation Color here

This will change color of Header Menu items on All Pages. So to change color to different color on Homepage Only, you can use this code to Custom CSS box.

body.homepage div.header-nav-item>a {
    color: #fff !important;
}