Create Suffusion Menu Header tutorial will show you how to add a Suffusion menu to the Navigation bar above the header on your website or blog.
Last Updated: June 25, 2016
Latest Updates: I have removed some images to make the page lighter.
Hint: Remember to keep saving all your changes so that they show on the front page of your website.
Remember for this tutorial I have added some selected options. You will probably want to select your own options.
Other Graphical Elements Tutorials:
- Creating a Suffusion Menu above the Header
- Navigation Bar Below Header
- Post and Page Bylines
- Post Formats
- Byline Configuration
- Featured Content
- Breadcrumbs and Page Navigation
Create Suffusion Menu Header Steps
Step 1 ) Go to Appearance -> Suffusion Options -> Other Graphical Elements -> Navigation Bar Above Header. See image below.
Step 2 ) The following Navigation Bar Above Header allows you to set up the following option.
- Drop-down menus and widget areas (Remember you must enabled this option or else the navigation bar will not appear)
- Hidden (Default)
Step 3 ) The following settings allows you to set up the following option.
Navigation Bar Style
- Navigation bar is as wide as your browser window and contents of the bar
- Navigation bar is as wide as your browser window and contents of the bar are aligned with your main page
- Navigation bar and its contents are aligned with your main page (Selected for this tutorial)
- Theme default
Drop-down menu position
- Theme Default
- Left (Selected for this tutorial)
Menu Item Style
- Show menu items as individual tabs (Selected for this tutorial)
- Show menu items as a continuous list
- Theme Default
Drop-down menu delay
- Leave blank for no delay (Entered 500 for this tutorial)
Step 4 ) The following settings allows you to set up the following option.
Fade effect for drop-down menu
- No effects
- Fade in the page (Selected for this tutorial)
Show “Home” page?
- Don’t show a home link (Selected for this tutorial)
- Show a text link
- Show an icon
“Home” page text
- Enter a name to show up on your menu for home page
Step 5 ) The following settings allows you to set up the following option.
Order of entities in navigation bar (Left as default for this tutorial)
Remember: you can drag and drop the following by selecting an individual tab and moving up or down
Text Transformation for the Navigation Bar
- ALL UPPERCASE
- all lowercase
- Capitalize First Letter Of Each Word
- No transformation
Step 6 ) The following settings Pages in Navigation Bar allows you to select from one of the following options.
- Show the top level pages in the navigation bar and their sub-pages in drop-downs (Selected for this tutorial)
- Show a single tab called “Pages” (or whatever you want to call it) and build a drop-down under it (default)
Step 7 ) The following settings allows you to set up the following option.
- “Pages” tab title
- “Pages” tab link
Step 8 ) The following settings allows you to set up the following options.
Pages in Navigation Bar – All or Selected
- Include all, ignoring next option
- Include selections from the next option (Selected for this tutorial)
- Exclude all, ignoring next option
- Exclude selections from the next option
Select pages to show in Navigation Bar
- Simply select all the pages that you wish to add to the navigation bar
Hint: In this section you can play around with the options until you get what you want.
Step 9 ) The following image illustrates the menu above the header with a white background.
If you have a look at the image above you will see a white background along the top. This is great if you have many menus to add to the top navigation bar. What if you only have three pages to show in the navigation bar menu as shown in this example? Suffusion is a very flexible theme and allows you to change these settings, click on the following URL Suffusion Custom Style Navigation Bar to make the changes.
I will be updating this tutorial from time to time, make sure you come back for the latest.
If you have any questions please let me know.
More suffusion tutorials: