Dottoro Theme Documentation

Tutorial to get your theme to work

5. Header and Menu

Dottoro theme allows you to completely customize the header and features a professional and highly flexible popup menu that you can place anywhere on your pages.

5.1 Header Options

These options are presented under Theme Options » General » Header.

Header Options
Header	Here you can select a header for your site. This setting can be overridden for pages under Pages » Page Settings for search, author and 404 pages under Theme Options » General » Author/Search/404 for post, category, tag and date archive pages under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings finally, for every single post and page on the edit post/page screen. All items (site logo, title and description, primary navigation and Header widget area) in the "Standard" header are positioned absolutely that enables you to set their positions in the theme editor. For further details, please see the Header Customization section. Tip: Selectors allow you to target posts and pages according to their attributes, such as post type, post format, categories and tags, authors, etc. For instance, you can select a header for posts from a certain category on the Advanced tab in the "Single Post Settings" section under Posts » Post Settings. So you don't need to change the header of posts one by one and you also don't need to change the header every time you create a new post. For further details, please see Selectors.
Site Logo	The "Logo Image" option allows you to set your own site logo. Just click on the "Set an Image" button and select an image for your site logo in the WordPress media dialog. If you want to display you site logo in the header, enable the "Show Logo Image" option. It is also possible to change the position of your site logo. Open the theme editor and go to Headers » Header Items » Logo. Here you will find a Position option that allows you to change the position of the logo and see the changes in real time.
Site Title and Description	The "Show Title" and "Show Description" options allow you to display the site title and description in the header. You can set the text of the title and description the usual way, with the 'Site title' and 'Tagline' options under Settings » General. It is also possible to change the look and feel of your site title and descriptio. Open the theme editor and go to Headers » Header Items » Title/Description. Here you will find a Position and Font options that allow you to change the position and font settings and see the changes in real time.

5.2 Header Customization

The Dottoro theme gives you multiple options to customize the header of your pages.

5.2.1 How to customize the "Standard" header

By default, all pages and posts use the "Standard" header that in most cases provides sufficient flexibility. The "Standard" header displays the site logo, title and description, the primary navigation and the Header widget area. Each of them is positioned absolutely that enables you to set their positions in the theme editor (Headers » Header Items). If you want to add some widgets to your header, put them into the Header widget area under Appearance » Widgets and your widgets will be displayed in the header. The Header widget area displays the widgets one below the other. To change this, go to Theme Options » Widget Areas, and change the layout of the Header widget area.

There are cases when the Header widget area doesn't provide enough flexibility. For instance, when you want to display some content on the left and some on the right side of the header. For these cases, you can use the dottoro_header_item action.

Example 1

This example shows how to display a login link at the top-right of the "Standard" header.
Add these lines to the functions.php file of your child theme:

add_action ( 'dottoro_header_item', 'login_panel');
function login_panel () {
?>
	<div class="login_panel"><a href="#">login</a></div>
<?php
}

and these ones to the style.css file of your child theme:

.login_panel {
	position: absolute;
	right: 0;
	top: 0;
}

Example 2

It is also possible to remove some items from the header on certain pages. This example shows how to remove everything from the header and display a login link instead of them on the page with id of 500.
Add these lines to the functions.php file of your child theme:

add_action ( 'dottoro_header_item', 'remove_all_and_display_login_panel', 1);
function remove_all_and_display_login_panel () {
    if (is_page('500')) {
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_site_info');
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_menu');
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_widget_area');
?>
		<div class="login_panel"><a href="#">login</a></div>
<?php
	}
}

Of course, you need to style the login panel similar to Example 1.

Example 3

This example shows how to display a widget area at the top-right of the "Standard" header. For further details on widget areas, please see the Widget Areas section.
Add these lines to the functions.php file of your child theme:

add_action ( 'dottoro_header_item', 'add_widget_area_to_header');
function add_widget_area_to_header () {
	echo (do_shortcode ('[widget_area name="NAME_OF_YOUR_WIDGET_AREA" /]'));
}

5.2.2 Custom headers

It is also possible to create totally custom headers. The Header option allows you to select a header for every page and post on your website. This option is useful if you need a completely different header on certain pages or if want to create the layout of the header and you don't want the header items to be positioned absolutely.
Custom headers can be created with the "Add New" button at the top of the page under Headers » Headers. The content of headers can be edited the same way as the contents of pages and posts. You can also use shortcodes in them. There are some shortcodes that are intended for custom headers, but of course, they can be used anywhere on your pages. These are the [site_logo], [site_title], [site_description] and [primary_navigation] shortcodes.
Additionally, the [widget_area] shortcode is also often used in custom headers.

As we mentioned before, by default, the site logo, title and description, the primary navigation and the Header widget area are positioned absolutely. Moreover, the height of the header is also set by the skin of the theme. In case of custom headers, these settings are usually not necessary. The theme options for custom headers allow you to disable these settings.

The following options are supported for custom headers:

• Outer CSS Class

  One or more classes to add to the class attribute of the outer header element, separated by a single space. CSS classes allow you to set backgrounds, change font colors and much more.

• Full Width

  Select whether you want the header to be full width or the same width as the page.

• Static Positions

  Select whether you want the header items (site logo, title and description, primary navigation and Header widget area) to be positioned statically or absolutely. By default, header items are positioned absolutely that enables you to set their positions in the theme editor. The downside of absolute positioning is that it requires CSS media queries to make the header responsive. This is not always true for static positioning, but the drawback of static positioning is that you cannot use the theme editor to position header items.

• Auto Height

  Select whether you want the height of the header to be determined by the content or the skin of your site. By default, the skin determines the height of your header so you can change the height in the theme editor. But if the header items are statically positioned (see the option above), then probably the content should determine the height of the header. If this is the case, enable this option.

Headers on small screens

The responsive stylesheet in our demo child theme gives you a good basis to create your own responsive header design (see Responsive Design). It shows you how to change the height of the header and how to move the menu and the other header items to different positions on small screens. This stylesheet is designed for cases when you have the same header on all of your pages and the header items are positioned absolutely.
But what do you need to do if you want to use different headers on your pages or the header items are positioned statically on your site?

• If you only use statically positioned header items on your site, then probably you don't need header related CSS media queries at all since your headers will automatically adapt to the screen size. In this case, remove all header related media queries from the style.css file of your child theme to avoid conflict.
• If you want to use different headers on your pages and the header items are positioned absolutely in some of the headers, then you need to create different media queries for different headers. For instance, if you want to use the "Standard" and a custom header on your site and the header items are positioned absolutely in your custom header, then use the Outer CSS Class option to add a CSS class to your header (e.g. my_header) and modify the header related style rules in the style.css file of your child theme.
  The result should look like this (your pixel values will be different, the dottoro_standard_header class applies to the Standard header):

  	/* Standard menu */
  @media only screen and (max-width: 810px) {
  	.dottoro_standard_header #header {height:130px !Important;}
  	.dottoro_standard_header #nav {left:0 !Important; right:0 !Important; bottom:0 !Important; top:auto !Important}
  }
  .compressed_menu .dottoro_standard_header #header {height:90px !Important;}
  .compressed_menu .dottoro_standard_header #nav {left:auto !Important; right:0 !Important; width:auto !Important;}
  @media only screen and (max-width: 310px) {
  	.compressed_menu .dottoro_standard_header #header {height:130px !Important;}
  	.compressed_menu .dottoro_standard_header #nav {right:37% !Important;}
  }
  
  	/* Custom menu */
  @media only screen and (max-width: 810px) {
  	.my_header #header {height:130px !Important;}
  	.my_header #nav {left:0 !Important; right:0 !Important; bottom:0 !Important; top:auto !Important}
  }
  .compressed_menu .my_header #header {height:90px !Important;}
  .compressed_menu .my_header #nav {left:auto !Important; right:0 !Important; width:auto !Important;}
  @media only screen and (max-width: 310px) {
  	.compressed_menu .my_header #header {height:130px !Important;}
  	.compressed_menu .my_header #nav {right:37% !Important;}
  }

  For further details, please see the Responsive Design section.

Example 1

This is an example for a custom header. You can create custom headers under Headers » Headers. This example shows how to display the site logo, title and description, the primary navigation and the Header widget area. If the "Full Width", "Static Positions" and "Auto Height" options are disabled for this header, then the header will look exactly the same as the "Standard" header.

[site_logo /]
[site_title /]
[site_description /]
[primary_navigation /]
[widget_area name="Header" /]

Example 2

This example is similar to the previous one, but it creates a liquid layout and works with statically positioned header items. The "Static Positions" and "Auto Height" options must be enabled for this header. Please note that since the items in this header are positioned statically, you cannot use the theme editor to change their positions.

[row]
	[col][site_logo /][/col]
	[col]
		[site_title /]
		[site_description /]
	[/col]
	[col style="float: right"]
		[widget_area name="Header" /]
	[/col]
[/row]
[primary_navigation /]

The Back button is displayed to the left of the "Menu" menu item in the compressed menu. Since in this custom header the primary navigation is aligned to the left side, if the Compressed Menu option is enabled for the primary navigation, the Back button needs to be moved to the right side of the "Menu" menu item to avoid 'jumping'.
If you add this line to your style.css file:

.popup_menu .menu_compressed .menu_back {float: right !Important;}

then the Back button will be displayed to the right of the "Menu" menu item in all compressed menus on your site.
If you want the Back button to be displayed on the right side only in your custom header, add a class to the "Outer CSS Class" option (e.g. compressed_back_on_right) and add this line to your style.css file:

.compressed_back_on_right .popup_menu .menu_compressed .menu_back {float: right !Important;}

Example 3

This example shows how to create a custom header that displays the site title on the top-left, the Header widget area on the top-right, a custom widget area on the bottom-left and the primary navigation on the bottom-right corner.

[row]
	[col]
		[site_title /]
	[/col]
	[col style="float: right"]
		[widget_area name="Header" /]
	[/col]
[/row]
[row]
	[col]
		[widget_area name="NAME_OF_MY_CUSTOM_WIDGET_AREA" /]
	[/col]
	[col style="float: right"]
		[primary_navigation /]		
	[/col]
[/row]

5.3 Menus

The theme provides the following options for displaying menus:

• The primary navigation can appear as a popup menu in the header. You will find its settings under Theme Options » General » Header.
• The Dottoro Popup Menu widget allows you to display popup menus anywhere on your site.
• The Dottoro Navigation Bar widget allows you to display a menu as an indented list.

The following options are supported for popup menus:

• Enable Menu (primary navigation only)

  Select whether you want the primary navigation to be displayed or not.

• Type of menu

  Here you can decide whether you would like to use a CSS or a JavaScript menu. With using a JavaScript menu you will also be able to choose from various menu effects that will enhance the appearance of your submenus. No effects are supported in CSS menus. Another advantage of JavaScript submenus is that with them your submenus will never run off the browser window. We recommend using a JavaScript menu because it will appear as a CSS menu to users who don't have JavaScript enabled in their browsers (less than 5% of internet users).

• Menu orientation

  The orientation of the main menu.

• Menu Animation

  Here you can select animation effects for JavaScript menu. The available animations are: fade, growing and slide. The fade effect can be used as an additional effect to the slide and growing animations.

  In Internet Explorer before version 9, the fade effect doesn't work with multi-level menus (submenu within submenu) and causes rendering problems. If you use multi-level menus, select the version filter checkbox to disable fade effect in old IE browsers.

• Animation Duration

  The duration of the menu animation, in milliseconds. Default is 500.

• Menu Description

  Select whether you want to display descriptions for main menu items or not. You can assign a title attribute and description to every menu item in the WordPress menu wizard (the description option is hidden by default, but can be enabled in the screen options in the top right on the menu wizard page). If you want the description or title to be displayed for main menu items, select the "description" or "title as a description" options. Otherwise, select the "none" option.

• Enable Mega Menus

  Here you can select whether you want to display mega submenus or not.
  If this option is enabled, mega menus assigned to menu items will be displayed as drop-down menus. Please note that the comressed menu ignores mega menus, it always displays the original menu hierarchy.
  For further details, please see the Mega Menus section.

• Compressed menu

  Select a menu for the compressed menu. The compressed menu is displayed instead of the normal menu on low resolution devices. This setting has effect only if JavaScript Menu is enabled.
  Check out our demo site and resize your browser window to a small size, you will see what compressed menu means.

• Compressed below window width

  Here you can set the width of browser window (in pixels) below the compressed menu should be shown. Check out our demo site and resize your browser window to a small size, you will see what compressed menu means.

• Open event

  Here you can select the event type that will trigger the menu to open/close. This option has effect on desktop computers but not on touchscreens.
  Possible values:

  • hover: when the user moves the mouse pointer into a menu item, the drop-down submenu of the item opens and when the user moves the mouse pointer out of the element, the submenu closes.
  • activate hover: same as 'hover' but the user needs to click on the menu to activate it. Drop-down submenus are only shown if the menu is activated.
  • click hover: first level popup menus open on click, non-first level popup menus open on hover.
  • click: popup menus open on click.
  Check out our menu demo site. The menu at the bottom of this page and the primary navigations on the Mega menu and Full Width Mega Menu pages require activation.

• Open first level menu

  Here you can specify whether one first level menu must always be open or not. The 'Horizontal Submenus' demo page shows you how this works.
  Please note that if this option is enabled, the "Move into view" option has no effect on first level popup menus.

• Opening Direction - First level popups

  Here you can select the opening direction of first level popup menus.

• Opening Direction - Non-first level popups

  Here you can select the opening direction of non-first level popup menus. The downward and upward options are mostly useful if the orientation of popup menus are horizontal. See Horizontal Submenus in our menu demo site and you will understand what we mean.

• Move into view

  Here you can select whether the popup menus should be automatically moved into the browser window or not. This setting has effect only if JavaScript Menu is enabled.

In addition, it is also possible to completely customize the look and feel of your menus in the Theme Editor. The options under Menu » Primary allow you to change the look of the primary menu while the options under Menu » Widget allow you to change the look of menus displayed with the popup menu widget, separately in the header, subheader, content, sidebar and footer. Moreover, the Theme Editor provides several pre-made menu skins that help you to create your own menu design. The "Submenu Skins" button under the Skins main menu allows you to select a menu skin for the primary navigation. The "Submenu Skins" buttons under Menu » Widget » Header/Subheader/Content/Sidebar/Footer » Submenu Skin allow you to select menu skins for menus displayed with the popup menu widget.

5.3.1 Mega Menus

With the help of mega menus you have the ability to display any content in popup menus on your site. You can display widgets, post lists, sldeshows and anything you want in drop-down menus.

Managing Mega Menus

Mega menus can be managed under Appearance » Mega Menus. To create a new mega menu, click on the "Add New" link at the top-left corner of the page, give your menu a title, set its content and click publish. The contents of mega menus can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them.

Adding mega submenus to menus

You will find a Mega Submenu option in the "Dottoro Options" box for every menu item under Appearance » Menus. It allows you to assign a mega menu to a menu item that will be displayed as a drop-down submenu of the item. Since compressed menus don't support mega menus, it also makes sense that a menu item with mega submenu has child items. So you have the chance to display a mega menu in normal and a "standard" submenu in compressed mode.
In most cases, mega submenus require custom styling. For instance, mega submenus usually have the same width as the whole main menu. Check out our menu demo site. It shows how to create and customize mega menus.