Dec 082011
 
suffusion-custom-style-navigation-bar

Donate for a cup of coffee :)

In this tutorial we are going to add some style to our navigation bar above the header. 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.

Navigate to Appearance >> Suffusion Options and select Skinning and click on 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.

Add style to the navigation bar

Next navigate 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. See image below.

Remove the white colour from the Navigation Bar

We are going to add some more style to the menu. You can choose any combination of colours.

Navigate to Navigation Menu Items and under Background Color select Custom. I chose white background. You can choose any colour you want. See image below.

Style the menu items

Navigate to Navigation Menu Items Border and select the following as illustrated in the image below.

Add border to the navigation menu items

Navigate 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.

Add font colour to the navigation menu item

Navigate 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.

Add menu item hover colour

Navigate to Navigation Menu Items: Hover Border and select the border colour. I chose red and for the Border Width I chose 1. You can choose your own settings. See image below.

Add border colour to menu items

I hope you enjoy this little tutorial. Next tutorial add a slideshow to suffusion theme.

More suffusion tutorials:

  1. Adding a header image.
  2. Create a Suffusion Menu above the Header.
Nov 292011
 
creating-a-suffusion-menu-above-the-header

Donate for a cup of coffee :)

Adding a Menu above the header

In this tutorial we are going to add a menu to our Navigation bar above the header of our website using Suffusion Options under Appearance.

Hint: Remember to keep saving all your changes so that they show on the front page of your website.

Hint: Click on any image to see a larger size image.

Select Other Graphical Elements >> Navigation Bar Above Header, see image below.

Add a suffusion menu above the header

Under Basic Setup select Drop-down menus and widget areas, see image below.

Drop down menu and widget area

Navigate to Pages in Navigation Bar and select the following. Under Page listing style in the Navigation Bar, select which option is best suited for your design. I have chosen Show the top level…..see image below.

Page listing style

Under Pages in Navigation Bar – All or selected, select Include selection from the next option. Under Select pages to show in Navigation Bar, simply select all the pages that you wish to show in your navigation bar. See image below.

Hint: In this section you can play around with the options until you get what you want.

Select number of pages in navigation bar

That is it; you should see your menu on the front of your website. See image below.

The menu has been set on top of the header

If you have a look at the image above you will see a white background along the top, which is great if you have many menus to add. What if you only have three pages to show just like my example here? Suffusion being so flexible allows you to change these settings manually ;) This will be illustrated on the next lesson.

I hope you enjoy this small tutorial ?

Next tutorial, Suffusion Custom Style Navigation Bar.

More suffusion tutorials:

  1. Adding a Header Image