Apr 242014
 

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:

  1. Favicon
  2. Creating a Suffusion Menu above the Header
  3. Header
  4. Navigation Bar Below Header
  5. Footer
  6. Post and Page Bylines
  7. Post Formats
  8. Byline Configuration
  9. Featured Content
  10. Breadcrumbs and Page Navigation
  11. Miscellaneous

Create Suffusion Menu Header Steps

Step 1 ) Go to Appearance -> Suffusion Options -> Other Graphical Elements -> Navigation Bar Above Header. See image below.

suffusion-menu-above-header-other-graphical-elements

Step 2 ) The following Navigation Bar Above Header allows you to set up the following option.

Basic Setup

  • 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)
  • Right
  • Center

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

  • Pages
  • Categories
  • Links
  • top

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.

suffusion-menu-above-header-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.

Enjoy

More suffusion tutorials:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  5 Responses to “Create Suffusion Menu Header”

  1. If time is money you’ve made me a wealthier woman.

  2. Your tutorial is not only top shelf, it was a lifesaver in a manner of speaking. I already spent a whole day to no avail trying to figure out how to do these tabs on nav bar. Thank you for your expertise and willingness to share. Ron

    • Hi Ron, thank you for your great comment. I am happy to hear that my tutorial has helped you. As you can see I am in the process of adding more Suffusion tutorials. So if you have a paticular request, it will be my pleasure to create it for you.

      Kind regards

  3. Gracias Manuel,

    It’s the guide I needed to modify my site to my needs!!!!

    Again: GRACIAS

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)