Creating a Suffusion Menu above the Header

 themes, tutorial, Wordpress  2 Responses »
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

Suffusion WordPress Theme Tutorials

 suffusion, themes, tutorial, Wordpress  5 Responses »
Nov 262011
 
suffusion-wordpress-theme-tutorials

Donate for a cup of coffee :)

Adding a header image

We are going to learn how to add a header image to the website. This is a very simple tutorial which everyone should be able to follow free of issues :)

Hint: Remember to save everything you do or else it will not display on the front end of your website.

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

After you install Suffusion theme navigate to Appearance >> Suffusion Options >> Skinning >> Theme Selection, see image below.

Adding a Header image to Suffusion

Then navigate to Theme Selection, see image below and select which ever theme you prefer. I selected Royal Blue on a light theme.

Select a Theme for Suffusion Theme

We are going to add a png header image with 1000 x 204 pixels; you can choose another size if you want as long as you adjust the settings to accommodate the size of your image. Navigate to Header see image below.

Upload header image Suffusion Theme

Select the following options Custom styles, Use a predefined image (default) see image below.

Adjusting some of the settings Suffusion Theme

Add the Header Background Image see image below. Remember if you select the wrong image or are not happy just click on Reset and start again.

This is the image that has been uploaded for Suffusion Theme

Select the image position, I selected Middle of the page; see image below.

The image position has been set in the header.

Add the Blog Title/ Header Colour, I selected white. I selected None for Blog Title / Header Decoration and for Blog Title / Header Hover Colour I selected light pale purple. See image below. The colours I chose are just for illustration. Choose your own colours if you like.

We have set Suffusion theme Title colour

For the Blog Description / Sub-header Colour, I selected white. I left the default settings for Empty Space Between Top of Page and Header. I change the Height of the Header image to 130. See image below.

Here we set Suffusion Theme Sub-title colour

Hint: Remember to keep saving your work.

I left the Header Layout Style as Theme Default. I moved the Title and Sub Title to the left and the Sub-Header below the header text. Navigate to Other Graphical Elements >> Header. See image below.

We set up Suffusion Theme Other Graphical Elements

That is all you need to do to add a header image to the theme. See image below.

Suffusion Theme final settings set for the header.

There is something missing from the header. I don’t like the search bar where it is. Plus I want to add some menus to the header as well.

Next lesson Creating a Suffusion Menu above the Header.