The Header Navigation settings control the background color, the text color, and the color of active and inactive state text in the header navigation.
Note: Active State text is the hyperlink text for the page a site user is currently on. The Inactive State text is for the other navigation links or pages that the user is not currently on.
Examine the two screenshots below to see how we have used Header Navigation settings to change text and color elements in the Header.
-The Background Color has been changed from white to light pink.
-The Active State link text ("Home") has been changed from black to bright pink.
-The Inactive State text (All the other navigation elements: "Accommodations," "Special Offers," "Retreats," ect.) has been changed from gray to white.
-The Text Color (the non-hyperlink text, such as the phone number) has been changed from red to yellow.
To set up the Header Navigation:
- From the Site Builder drop-down menu, select Styles.
2. From the Styles menu, select Header Navigation.
3. Select your Background Color.
You can use the hex color code text box.
OR use the Color Picker. See Using the Color Picker.
Note: There are a number of browser extensions or web tools available that can help identify the hex color code being used on existing websites,
4. Select the Text Color.
This is the color for any text that appears in the header that is not a link/navigation title.
5. Select the Active State color.
This is the color of the navigation title (webpage) that a website user is looking at. For example, when a user is one your website's home page, the word "Home" will appear in the Active State color. However, when the user goes to another page, "Home" will change to the Inactive State color.
6. Select the Inactive State color.
This is the color of all navigation titles (webpages) when the user is not presently on those pages.
7. Select Save.