Pageloader

Theme Documentation – Header


Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

Notice: Function do_shortcode_tag was called incorrectly. Attempting to parse a shortcode without a valid callback: zozo_vc_section_title Please see Debugging in WordPress for more information. (This message was added in version 4.3.0.) in /home/tzozothemes/docs/wp-includes/functions.php on line 6031

[vc_row center_row=”yes” css=”.vc_custom_1460962081372{padding-bottom: 60px !important;}”][vc_column][zozo_vc_section_title text_align="left" title="Header" title_transform="capitalize"]The header of a website is one of its most valuable areas. Layer contains different header options, header types and menus. There are many different elements in header options and many ways to customize it. Below list shows the different section in the header.[/zozo_vc_section_title][vc_row_inner][vc_column_inner][vc_column_text]

  • Header Options & Setup

[/vc_column_text][vc_column_text]

  • Adding Logo & Favicons

[/vc_column_text][vc_column_text]

  • Setting Up The Menu

[/vc_column_text][vc_column_text]

  • Using Mega Menu

[/vc_column_text][vc_column_text]

  • Page Title bar

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1448347815938{padding-top: 20px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1452339387816{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-header-options-setup”][vc_column][zozo_vc_section_title text_align="left" title="Header Options & Setup" title_transform="capitalize"]Layer currently offers 10 different Header Types, each with its own unique design and set of options. There are several options to customize the header, as well as the content within it. Follow the steps to setup the header and its options.[/zozo_vc_section_title][vc_row_inner][vc_column_inner][vc_column_text]

Setup the Header

[/vc_column_text][vc_separator][vc_column_text]

  • Navigate to Theme Options > Header to access the header options. You will see 5 sections; Header Type, and Header Top Bar, Sliding bar, Styling, Main Menu, Secondary Menu. See below for information and screenshot on what each section contains.

[/vc_column_text][vc_column_text]

  • Header – You can enable Cart, Search Form, Social Links, Sticky Header, Header Layout ( Fullwidth or Boxed ) from this Header tab.

[/vc_column_text][vc_column_text]

  • Header Type – You can choose Types, Transparent, Skin, Slider Position from the header type options. The Header Types are listed out below.

[/vc_column_text][vc_single_image image=”2489″ img_size=”full” title=”Header Simple”][vc_single_image image=”2487″ img_size=”full” title=”Header Right”][vc_single_image image=”2485″ img_size=”full” title=”Header Center”][vc_single_image image=”2486″ img_size=”full” title=”Header Center2″][vc_single_image image=”2502″ img_size=”full” title=”Header Center3″][vc_single_image image=”2491″ img_size=”full” title=”Header Fullwidth”][vc_single_image image=”2484″ img_size=”full” title=”Header Boxed”][vc_column_text]

  • Header Top bar – You can Enable/Disable menu options, Welcome Message, Phone Number, Email Address.

[/vc_column_text][vc_column_text]

  • Sliding Bar – You can Enable/Disable Sliding Bar options, Disable Sliding Bar on Mobile, Choose Sliding Bar Columns.

[/vc_column_text][vc_column_text]

  • Styling – Styling options allows you to choose the spacing for header.

[/vc_column_text][vc_column_text]

  • Main Menu – You can choose Menu Type, Menu Height, Sticky Menu Height, Dropdown menu width.

[/vc_column_text][vc_column_text]

  • Secondary Menu – You can Enable/disable Secondary menu options and its position.

[/vc_column_text][vc_separator css=”.vc_custom_1448521885432{padding-top: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_single_image image=”2391″ img_size=”full” onclick=”link_image” title=”Header”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”2392″ img_size=”full” onclick=”link_image” title=”Header Top Bar”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”2393″ img_size=”full” title=”Sliding Bar”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_single_image image=”2394″ img_size=”full” onclick=”link_image” title=”Styling”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”2397″ img_size=”full” onclick=”link_image” title=”Main Menu”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”2398″ img_size=”full” onclick=”link_image” title=”Secondary Menu”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1461410539520{padding-top: 30px !important;padding-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1452334644462{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-adding-logo-favicon”][vc_column][zozo_vc_section_title text_align="left" title="Adding Logo & Favicon" title_transform="capitalize"]For adding logo to your site, you need to upload your logo as an image file. Once you upload a logo, it will be used in every location. Layer allows you to upload a unique logo for 2 different areas; default logo and sticky header logo. Read the below information to upload a logo as well as information on favicons.[/zozo_vc_section_title][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Insert Default Logo and Sticky Logo

[/vc_column_text][vc_separator][vc_column_text]

  • Navigate to Theme Options > General > Logo tab to access the logo options.

[/vc_column_text][vc_column_text]

  • You will see two logo upload options under the Logo tab, one is for default logo and other one is for sticky header logo.

[/vc_column_text][vc_column_text]

  • Click the Upload button and select your default logo file in default logo section.

[/vc_column_text][vc_column_text]

  • Click the Upload button and select your sticky header logo file in sticky header logo section.

[/vc_column_text][vc_column_text]

  • Main Menu – You can choose Menu Type, Menu Height, Sticky Menu Height, Dropdown menu width.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2540″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1461410869069{padding-top: 30px !important;padding-bottom: 10px !important;}”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Favicon Options

[/vc_column_text][vc_separator][vc_column_text]

  • You can find the Favicon Options in Appearance > Customize > Site Identity > Site Icon.

[/vc_column_text][vc_column_text]

  • The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2541″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1461410937328{padding-top: 30px !important;padding-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1452333155834{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-setting-up-menu”][vc_column][zozo_vc_section_title text_align="left" title="Setting Up The Menu" title_transform="capitalize"]For the main menu settings, Layer supports custom WordPress menus, with multiple levels of dropdown. You can assign a menu in 4 areas Primary Menu, Primary Right Menu, Top Menu, Footer Menu. These menu locations can have a custom menu assigned. Once a menu is created and assigned to the location, it will show up on the site.[/zozo_vc_section_title][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Menu Locations

[/vc_column_text][vc_separator][vc_column_text]

  • Primary Menu – This is the Main Menu that shows in the Header area.

[/vc_column_text][vc_column_text]

  • Primary Right Menu – This is the Right Menu shows in header type Header Centered Logo and Header Centered Logo 2.

[/vc_column_text][vc_column_text]

  • Top Menu – This is show in Top bar and other locations.

[/vc_column_text][vc_column_text]

  • Mobile Menu – This is the Menu that can be assigned for mobile view.

[/vc_column_text][vc_column_text]

  • Footer Menu – This is the bottom Menu that can be assigned in footer.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2543″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1461411584109{padding-top: 30px !important;padding-bottom: 10px !important;}”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Setup New Menu

[/vc_column_text][vc_separator][vc_column_text]

  • To setup new menu, Navigate to Appearance > Menus section of your admin sidebar.

[/vc_column_text][vc_column_text]

  • Click the Create A New Menu link and enter the name then click the Create Menu button.

[/vc_column_text][vc_column_text]

  • To add a custom menu item, enter a custom name and link into the Links box.

[/vc_column_text][vc_column_text]

  • You can use drag and drop functionality to manage your menus.

[/vc_column_text][vc_column_text]

  • To Create a dropdown menu, you can simply drag a menu item below and slightly to the right of another menu item, and it will be under a main menu and create a dropdown section.

[/vc_column_text][vc_column_text]

  • Once you setting up your menu, assign the menu to any one of the 4 locations which is shown at the bottom of the page in the Menu Settings.

[/vc_column_text][vc_column_text]

  • After setting up the menu, click the Save Button.

[/vc_column_text][vc_column_text]

  • Below screenshot shows that how to set up the menu with various options and categories.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2402″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1448348059400{padding-top: 20px !important;}”][vc_single_image image=”2401″ img_size=”full”][vc_separator css=”.vc_custom_1448348059400{padding-top: 20px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1479903704358{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-onepage”][vc_column][zozo_vc_section_title text_align="left" title="Setup One Page Menu" title_transform="capitalize"]Layer used one page menu for all demos, Please follow the steps that how to set up one page menu.[/zozo_vc_section_title][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

  • In your backend editor, click on VC Row Settings icon, the box will open and scroll down to see the Row Id.

[/vc_column_text][vc_column_text]

  • In that field, enter the section id like this #section-(your section name), for example the section is About means, the id should be like this #section-about.

[/vc_column_text][vc_column_text]

  • Likewise create a row id like above for all the section in that page. Refer screenshot.

[/vc_column_text][vc_column_text]

  • Navigate to Appearance > Menus section of your admin sidebar.

[/vc_column_text][vc_column_text]

  • Select the menu from dropdown or create a new menu to setup one page menu.

[/vc_column_text][vc_column_text]

  • Find a Custom Link tab and you need to enter the created section Id in that URL field. For example you have created the section id like this#section-about. Same Id should be given in that URL and enter the field name like About or whatever you can give the field name and click on add to menu button and save the changes.

[/vc_column_text][vc_column_text]

  • Likewise add menu from custom link with exact URL for all the sections in that page. The Id which is given in the page section and custom link should be same.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2554″ img_size=”full” onclick=”link_image”][vc_single_image image=”2555″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1448348059400{padding-top: 20px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1452333228678{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-mega-menu”][vc_column][zozo_vc_section_title text_align="left" title="Mega Menu" title_transform="capitalize"]Layer has a mega menu that can be enabled under the main menu. You can set 1-4 columns and having custom column width settings. You can set icons/images next to menu items and more. Please follow the steps that how to set the mega menu.[/zozo_vc_section_title][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Create A Mega Menu

[/vc_column_text][vc_separator][vc_column_text]

  • Navigate to Appearance > Menus section of your admin sidebar.

[/vc_column_text][vc_column_text]

  • Select the Create a New Menu link to create a new menu, or choose the Select a menu to edit option that you already have an menu.

[/vc_column_text][vc_column_text]

  • The Mega Menus are available only for top level navigations items only in “Main Menu” area.

[/vc_column_text][vc_column_text]

  • Click the Arrow icon next to any First Parent Level menu item. Then click enable the Mega Menu option.

[/vc_column_text][vc_column_text]

  • Set the number of columns to display the columns for the mega menu.

[/vc_column_text][vc_column_text]

  • Menu item have a glyphicons Ex: glyphicon-search, and font awesome icon, use fa- in the name. Ex: fa-times.

[/vc_column_text][vc_column_text]

  • After set up Mega Menu, assign the menu to the Main Menu location in the Theme Locations at the bottom of the page and click Save button.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”2403″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_separator css=”.vc_custom_1448348059400{padding-top: 20px !important;}”][/vc_column][/vc_row][vc_row center_row=”yes” css=”.vc_custom_1452333283635{padding-top: 0px !important;padding-bottom: 60px !important;}” el_id=”section-page-title-bar”][vc_column][zozo_vc_section_title text_align="left" title="Page Title Bar" title_transform="capitalize"]The Page Title Bar is comes under the menu/header and contains the page title text, breadcrumbs or search box. Layer has various options to customize the page title bar. Read the below steps to setup page title bar.[/zozo_vc_section_title][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Setup The Page Title Bar

[/vc_column_text][vc_separator][vc_column_text]

  • Open up an individual page or post in your WordPress admin.

[/vc_column_text][vc_column_text]

  • You can find Page Title Bar under Page Options.

[/vc_column_text][vc_column_text]

  • Layer has options that you can customize the page title bar for page options and post options.

[/vc_column_text][vc_column_text]

  • You can show or hide the page title bar and page title. Below showing some options.

[/vc_column_text][vc_column_text]

  • Page Title Bar Type – This option contains Default and Mini Title Bar.

[/vc_column_text][vc_column_text]

  • Page Title Bar Skin – This option contains Light and Dark skin.

[/vc_column_text][vc_column_text]

  • Page Title Alignment – You can align the title bar in Left, Center and Right.

[/vc_column_text][vc_column_text]

  • Choose custom background options or color, set parallax effect, enable video background and change the height of the page title bar.

[/vc_column_text][vc_column_text]

  • All options having several custom options to select for it. These options will take effect for the individual page or post.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”300″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]