Feb 182015
 

Suffusion Graphical Elements Navigation Bar Below Header will show you how to add a Suffusion menu to the Navigation bar below the header on your website.

Last Updated: March 9, 2018

Latest News: I have updated the documentation below.

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

Suffusion Graphical Elements Navigation Bar Below Header

Step 1 ) Go to Appearance -> Suffusion Options -> Other Graphical Elements -> Navigation Bar Below HeaderSee image below.

suffusion-graphical-elemets-navigation-below-header

Step 2 ) The following section Look and Feel allows you to set up the following options.

Show / Hide Navigation Bar

  • Drop-down menus and widget areas
  • Hidden (Default)

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
  • Theme default

Drop-down menu position

  • Theme Default
  • Left
  • Right
  • Center

Menu Item Style

  • Show menu items as individual tabs
  • Show menu items as a continuous list
  • Theme Default

Drop-down menu delay

  • Leave blank for no delay

Fade effect for drop-down menu

  • No effects
  • Fade in the page

Show “Home” page?

  • Don’t show a home link
  • Show a text link
  • Show an icon

“Home” page text

  • If you have opted to show a text link above, you can set the text to show. The default is “Home”. This setting is ignored if you are hiding your navigation bar or if you have chosen to not show a home link or to show a home icon.

Order of entities in navigation bar

Note: 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 3 ) The following section Pages in Navigation Bar allows you to set up the following options.

Page listing style in the Navigation Bar

  • Show the top level pages in the navigation bar and their sub-pages in drop-downs
  • Show a single tab called “Pages” (or whatever you want to call it) and build a drop-down under it (default)

“Pages” tab title

  • In the above option if you have chosen to show a single tab for pages and build a drop-down under it, you can set the title for that tab. This setting is ignored if you have chosen to display top level pages in the navigation bar.

“Pages” tab link

  • Enter the full URL, including http://

Pages in Navigation Bar – All or Selected

  • Include all, ignoring next option
  • Include selections from the next option
  • 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 4 ) The following section Categories in Navigation Bar allows you to set up the following options.

Category listing style in Navigation Bar

  • Show the top level categories in the navigation bar and their sub-pages in drop-downs
  • Show a single tab called “Categories” (or whatever you want to call it) and build a drop-down under it

“Categories” tab title

  • In the above option if you have chosen to show a single tab for categories and build a drop-down under it, you can set the title for that tab. This setting is ignored if you have chosen to display top level categories in the navigation bar.

“Categories” tab link

  • Enter the full URL, including http://

Categories in Navigation Bar – All or Selected

  • Include all, ignoring next option
  • Include selections from the next option
  • Exclude all, ignoring next option
  • Exclude selections from the next option

Select categories to show in Navigation Bar

  • If you have too many categories on your blog you might want to exclude some so that the navigation bar doesn’t get ugly. Note that if your navigation bar is hidden, this setting is ignored. Also if you select a category whose parent is not selected, the child will NOT be displayed. The exclusion is hierarchical, so if you exclude a parent category but include its child, neither the parent nor the child will show up in the dropdown. All categories are excluded by default.

Step 5 ) The following section Links in Navigation Bar allows you to set up the following options.

WordPress Link listing style in Navigation Bar

  • Show the links in the navigation bar.
  • Show a single tab called “Links” (or whatever you want to call it) and build a drop-down under it

 “Links” tab title

  • In the above option if you have chosen to show a single tab for WordPress links and build a drop-down under it, you can set the title for that tab. This setting is ignored if you have chosen to display individual links in the navigation bar.

 “Links” tab link

  •  Enter the full URL, including http://

Links in Navigation Bar – All or Selected

  • Include all, ignoring next option
  • Include selections from the next option
  • Exclude all, ignoring next option
  • Exclude selections from the next option

Select links to show in Navigation Bar

  • If you have too many links on your blog you might want to exclude some so that the navigation bar doesn’t get ugly. Note that if your navigation bar is hidden, this setting is ignored. All links are excluded by default.

Step 6 ) The following image WP 3.0 Navigation Menus allows you to set up the following options.

WP 3.0 Navigation Menus – All or Selected

  • All, ignoring next option
  • Selections from the next option

Select Menus to show

  • If you have too many menus on your blog you might want to exclude some so that the navigation bar doesn’t get ugly. All menus are included by default.

========================================

Click on the following URL Other Graphical Elements Tutorials for more other graphical elements tutorials.

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.

Enjoy.

More Suffusion Tutorials:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

  4 Responses to “Suffusion Graphical Elements Navigation Bar Below Header”

  1. I have it setup to show some Links from the dropdown “Links” But I can’t remember where I can actually add\edit links to show under this? I tried to use https://wordpress.org/plugins/string-locator/ but it did not find the text in my menus. Thanks!

    • Hi, did you check under Menus in your Admin panel? For example did you check in Appearance -> Menus? Can you also share the URL, so that I can check the links added in your menu.

      Thank you

 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)

1 × 2 =