Remember to turn your masthead on inside Properties > Parameters so your Horizontal Link Bar displays underneath.

Horizontal Navigation Bar Component


For Use on NEW, Full-Width Pages Only

 

This menu appears directly under the masthead on new full-width pages using a special editable page region and a component. You can insert up to five (5) links and choose from over 30 icons, and no special coding is required! The yellow navigation bar has a "hover" action when moused over on a desktop and is also mobile responsive. This bar can be seen in use on this page directly below the masthead.

This option is available is not currently available on migrated pages (pages that were migrated from UW's previous CMS system).

Guidlines When Using This Component

 

Important Guidlines for Using the Link Bar

  • The navigation link bar is not connected to your _nav.ounav files of your site, therefore this must be implemented on a page-by-page basis.
  • You must display at least four (4) link tabs in order to use this component.
  • Site authors can choose up to five (5) link tabs to display, and four (4) tabs is more ideal for mobile responsive display.
  • Keep your link (tab) names short for optimal mobile view display - 20 characters or less is ideal.
  • Site authors can select from any of the preset icons available within the link bar. New icons requests are not being accepted at this time.
  • Customizations to the link bar are not permitted.

 


Instructions for Using the (Full-Width) Horizontal Navigation Bar Component

 

Building Your Navigaton Bar

  1. Begin by creating a new full-width page.

  2. When your page is built, ensure you have added a masthead to the page under Properties > Parameters. If no masthead is present the navigation bar will have display issues.

  3. While inside Paramaters, ensure that your "Display Horizontal Navigation Bar" is turned on.

    Screenshot of Horizontal Navigation Display option in page Parameters

  4. Return to your Edit view within the page and select the green editable region directly under the masthead region labeled Horiztonal Navigation (Use Horizontal Navigation Bar Component).


  5. Next, you will need to insert your (Full-Width) Horizontal Navigation Bar component. To do this, click on the green editable region that now appears under your masthead. Once in the editing view, select the Component icon from your WYSIWYG toolbar.

    Screenshot of the component choose dialogue box in Omni

  6. You should now see the the Horizontal Navigation Component denoted by a blue rounded-corner rectange. To start making edits, hover over the component and select the pencil icon to open the component editor.

    Horizontal Navigation Component blue rectange screenshot

  7. This will take you to the component editor. Be sure to add at least four tab links inside the component editor, select you links and icons. Once your tab names and links have been added, click SAVE inside the component to return to your editing view of the page.

  8. Your link bar is now in place! Be sure to Publish your page to see your changes in a live view.

    Screenshot of the horizontal navigation bar in edit-mode.

Contact Us


UW Institutional Marketing

1000 E. University Ave | Dept. 3226

Don't forget the Request Help Gadget!
Located in the top right of your screen inside Omni CMS.

plugin icon