BlockStrap Documentation

How To Change the Color Scheme of the Navigation Bar

How to change the Blockstrap’s Navbar Colors, step-by-step.

1. Click Edit Site. This will open the site editor.

click edit site

2. Click the Document Overview icon. A left column will reveal the list of elements available on your page.

3. Select the header template part, then click Edit.

4. In the left column, click the BS Navbar Block

5. In the right column, navigate to the Background tab and set Light as the new Background Color for the Navbar block.

6. Then, turn off the “transparent until scroll” option. 

7. Next, switch to the Color Scheme tab and choose Light as the new color scheme. 

8. Lastly, click Save.

9. Refresh the front end to see the updated navbar color scheme, featuring a light background and dark menu items.

This process applies to all Blockstrap Child Themes, including the Directory Theme and the Real Estate Theme.

Important: For these two Child themes, you will need to edit two header template parts: the regular Header and the Header Transparent. 
Feedback