Navigation Search

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

Xtreme One offers primary and secondary navigation in the backend. The settings are identical for both navigations. If you use both navigations with dropdown in your theme, please note that secondary navigations is under ´primary navigation, since primary navigation has a higher z-index and can thus overlay secondary navigation when unfolded. If you only need one navigation, you should use primary primary navigation for semantic reasons.

Position

  • not used – Navigation is not existent.
  • before header – Navigation is above the header.
  • in top of header – Navigation is in the header before all other elements.
  • in header – second column – Navigation is in the second column of the header. The second column has to be activated in the header.
  • in bottom of header – Navigation is in the header after all other elements.
  • after Header – Navigation is after the header.
  • before main – Navigation is before the main container (content area).
  • before site info – Navigation is before the site info container.

Style Sheet

Xtreme One offers 4 different style sheets, which can be found in the xtreme-one/css/navigation/ folder. To be able to use different style sheets in one theme, the navigation container is assigned the name of the style sheet as class. Example: You have the descriptive style sheet as primary navigation and the shinybuttons style sheet as secondary navigation. The HTML code then looks like this.

Primary Navigation

<div id="primarynav" class="ym-clearfix">
        ...
</div>

Secondary Navigation

<div id="secondarynav" class="ym-clearfix">
        ...
</div>

descriptive

This style sheet is most useful when you want to display the description under the title. This option, however, is only available for the new WordPress menus. The associated style sheet is called descriptive.css. Class of the navigation container: descriptive. It should be noted here, that you have to adjust the width of the list elements according to the number of elements so every list element has the same width.

/* 6 list elements*/
.descriptive ul li { width: 16.667%; }
/* 4 list elements*/
.descriptive ul li { width: 25%; }

shinybuttons

YAML navigation that is also fit for dropdown navigation. The associated style sheet is called shinybuttons.css. Class of the navigation container: shinybuttons.

slidingdoor

YAML navigation with slidingdoor technology. This navigation has not been prepared for dropdown by us since its characteristics make it unfit. The associated style sheet is called slidingdoor.css. Class of the navigation container: slidingdoor.

superfish

The original superfish dropdown navigation http://users.tpg.com.au/j_birch/plugins/superfish/. The associated style sheet is called superfish.css. Class of the navigation container: superfish.

Content

Depending on the chosen content, the possible settings change.

Content - Pages

Normal WordPress pages are displayed in the navigation. You can sort the pages by menu order (when writing attributes->order) or by page title. If you don't want certain pages in the navigation, you can include or exclude them under in-/exclude from menu and then enter the pages' IDs separated by commas in the entry field IDs, separated by commas. The entry field cannot be seen if you have not made a choice for in-/excluding them from the menu. Menu levels determines how many levels of the page hierarchy are displayed in the navigation. No limit means the full hierarchy used when creating your page tree, 1 only the first level etc. Add Homelink – Activate the checkbox to include a link to your homepage in the navigation. In the field Text of Homelink, you can add the title of the homelink that you want displayed in the navigation. Activate Superfish Dropdown Javascript – If your navigation has several levels, you can activate the dropdown script. This script indicates, if a page has subpages and animates the display.

Content - Categories

Your categories are displayed in the navigation. The settings are identical with the pages. The only difference is in the order. You can sort the categories by category ID and category name.

Content – WordPress Menus

Since WordPress 3.0, you can create your own menus at Design->Menus. When you've created one or several menus, the names of your menus will also appear in the selection box. When you've chosen a menu, you can make these settings: Use Menu Description – The menu description is displayed after the title, see screenshot_Descriptive Navigation_. Activate Superfish Dropdown Javascript – see above.

General Search Settings

Search field in the navigation – Choose primary and secondary navigation if you want the search field displayed in the navigation. Display Send Button – With the checkbox activated, the Send button is displayed. Send Button Text – Enter the text you want displayed on the Send button. Displayed Search Field Text – This text will be displayed in the search field and hidden by Javascript, when the user clicks on the search field. Important: The last 3 settings affect the search widget if you use the WordPress feature get_search_form().

HTML5 Tag

When you have HTML5 output activated in General Settings, the chosen element from the selection box will be used for the navigations. You can choose between aside, footer, header, nav and section. The defailt value is nav.