Suffusion Custom Style Navigation Bar tutorial teaches you how to add some style to the navigation bar above the header.
Last Updated: June 25, 2016
Remember these settings are simply to show you how to add style, I am not looking at the cosmetic side of my tutorial :) you can choose your own settings.
Revision Update: I have edited some of the content and added a link.
1 ) Navigate to Appearance >> Suffusion Options >> Skinning >> Navigation Bar Above Header and make sure that you select Custom style. See image below.
Hint: Keep saving your work and make sure that you have selected Custom style or else your custom style will not be saved.
2 ) Go to Navigation Bar Background and select Transparent / No color. This is all you need to do to remove the white background from the navigation header as mentioned in the previous tutorial Creating a Suffusion Menu above the Header. See image below.
3 ) Go to Navigation Menu Items and under Background Color select Custom. I chose white background. You can choose any colour you want. See image below.
4 ) Go to Navigation Menu Items Border and select the following as illustrated in the image below.
5 ) Go to Navigation Menu Items Font and choose which ever colour your prefer. I chose black font colour, you can also change the font style, size etc. See image below.
6 ) Go to Navigation Menu Items: Hover and select Custom and choose your colour. I chose blue for my hover background. You can also add an image to the background but for tis tutorial I am just going to be looking at adding a colour. See image below.
7 ) Go to Navigation Menu Items: Hover Border and select the border colour of your choice. I chose red and for the Border Width I chose 1. You can choose your own settings. See image below.
I hope you enjoy this little tutorial. I will be updating this tutorial from time to time, so make sure you come back for the latest updates. If you have any questions please let me know.
More suffusion tutorials: