Header Style & Layout

  • Created:
  • / Author: TOTO

What are Header Options?
Option panel described before but some items of that are more important, so we describe them in more details. Header is one of those important items, you can find it in TOTO → Theme Options → Header. You can see main categories of header options in below image.

Let’s Start With Header Options

In this and next sections we will depict diverse tabs of Header style and layout. Presently we begin with header styles. Tap on Header Style and Layout tab.

Header Style and Layout

A  header is the area is one of the most valuable areas of your website. It runs across the top of the page and appears on every page of your website.  Header define the main tag line of your website. it show which section is important which is describe by setting header content size in big Letters. We’ll see styling and layout one by one.

1.Header Layout: header describe important section of your website. You can set your header by selecting header layout. select the header layout property. for the basic the default header set to “Full Width”. You can have another option “Stretched” which cover 80% width and also perfectly align the content.

2.Header Style: You can also set up different styling to your header. Header can add up with Menu-bar, Logo of your website’s and other option which set to Top-bar. with header it will present your web page look. you can override this in each individual page or post.

There different styling available in Heading Layout Start form ‘No-Header’ Then ‘Header-Style-1’,’Header-Style-2’…upto ‘Header-Style-23.

3.Main Menu Sticky: sticky define fix to one place. you can set your menu sticky which locked into place so that it does not disappear when the user scrolls down the page. You can also enable and disable effect for sticky menu in option. Option Are ‘Simple Sticky’ and ‘No Sticky’.

4.Main Menu Hover Style: A graphical control element that is activated when the user moves or hovers the pointer over a trigger area. You can set your Hover Style to sticky menu by setting different hover styles. default style is ‘Arrow At Top’.

Different Hover Styles:

  • Arrow At Top
  • Link Color Only
  • Line Above Menu Text.
  • Line Below Menu Text.
  • Arrow At Bottom
  • Arrow & Line at Top
  • Arrow & Line at Bottom
  • highlight & Arrow at Top
  • Highlight & Arrow at Bottom
  • Only Highlight.

5.Search Icon: You can add Search icon at your Header Layout. search icon will help user to find important content on your website’s very quickly.  You can control visibility of search icon by On and Off Option.

6.Shopping Cart Icon:  You can control visibility of Shopping cart icon by On and Off Option.

7.Social Icons: The Social Icons Widget displays small graphics linked to your social media accounts. After adding links to your social profiles,icons are automatically displayed on your site, letting your visitors connect with you through your preferred networks.

You can enable list of social icons to be visible in your header section as per choose header style it will be visible in that section, If you like to add more social icons you can control those from Social Media section in TOTO Theme Options, Choose icon style how it will be visible in header sections.

  • 7.1 Add Link to your Social media network.
  • 7.2 Select your Social icon style from Social-Style-Icon-1 To Social-Style-Icon-17.
  • 7.3 Tooltip: (On/Off), Tooptip Position: (Top,Bottom,Right,Left)
  • 7.4 Icon Color: Custom(Select Color)/ Brand Color.
  • 7.5 Icon Hover Color:  Custom(Select Color)/ Brand Color.

8.Header Logo Section Top & Bottom Padding:  You can set up an space between header logo, Header content which done by Padding. (note – will work only with header style 4, 5, 6, 10, 11, 12, 13, 19)

For Example : Padding-Top:10px; Padding-Bottom: 10px;

9.Mobile Header Sections: Header Layout work as static which will be fix for every page. Mobile Header section Work as responsive which means it is comfortable with every browser. You can control Mobile header sections elements by selecting following properties:

  • Search Box: On/Off
  • Social Icons: On/Off
  • Language: On/Off
  • Menu Pull Over Background
  • Menu Pull Over Background Style: ‘Simple’ , ‘Image’ , ‘Gradient’
  • Menu Pull Over Background Simple Color: Select Color Code
  • Link Color: Select Color Code
  • Link Hover Code: Select Color Code
  • Menu Hover Background Color: Select Color Code.

10.Quick Call Text: Similar to calling. Allow you to quickly send short message to list of contact in your mobile. visible at top of Header bar.

For Example : Number- 1 800 VNTPL.

11.Quick Email Text:  Content small amount of short message which is quickly sent to multiple recipients at the same time. visible at Top of Header bar.

Example : [email protected]

12. Topbar: It is a special message/image that you can show at the top (or bottom) of your website. You can manage your topbar by setting properties or by selecting elements layouts: Elements–>

  • WPML Language :Hide, Flags, Language Name, Flag & Language.
  • Social Icons: On/Off
  • Call to Action: On/Off
  • Topbar Button Title: Example(Buy Now)
  • Topbar Button Link: Example(https://themeforest.net/user/popothemes/portfolio)
  • Target: (Same Window, New Window, Scroll-to-section)
  • Text Color: Select Color Code
  • Text Hover Color: Select Color Code
  • Background Color: Select Color Code
  • Background Hover Color: Select Color Code
  • Background Hover Effect: (Effect-Top, Effect-Bottom, Effect-Left, Effect-Right)
  • Topbar Button Border Width:  Example (Width: 10px;)
  • Topbar Button Border Radius: Example (Width: 10px;)
  • Size: (Medium, Large, Small, Mini)
  • Icon: Select Icon
  • Icon Position: (Left, Right).

13. Header Background: Control header background.

  • Background Color: Select Color Code.
  • Background Type: (Default, Background-Color, Background-Gradient-Color, Dynamic-Gradient, Background-Image.

14. Sticky Header Background: Control Sticky Background.

  • Background Type: (Default, Background-Color, Background-Gradient-Color, Dynamic-Gradient, Background-Image.

Color:

You can set color to you websites by color elements. this color can change to look of your websites differently. You can manage all content of your websites by applying color elements.

1. Topbar:  You can manage topbar color.

  • Background-Color: Select Color.
  • Text-color: select color
  • Link Color: Select color
  • Link Hover Color: Select Color.

2. Main Menu: You can manage Main Menu color :

  • Background Color: Select Color
  • Menu Link Color : Select Color
  • Menu Link Hover Color: Select Color
  • Submenu Link Color: Select Color
  • Submenu Link Hover Color: Select Color
  • Dropdown Background Color: Select Color
  • Dropdown Hover Background Color: Select Color
  • Dropdown Top Line Color: Select Color
  • Main Menu Hover Background Color: Select Color

3.Breadcrumbs Link Color: A breadcrumb is a navigation scheme that indicates current page’s location to the user within a website or application. You can manage breadcrumbs link color.

4.Breadcrumbs Active Link Color: You can manage active color.

5.Breadcrumbs Separator Color: You can manage Separator color.

Subheader & Breadcrumbs

Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links. Subheader  easily add a responsive subheader to your pages. There is a separate subheader for your Front page

1.Display Subheader and Breadcrumbs: you can manage your subheader and breadcrumbs styling by selecting elements of layout.

  • Page Title: Show / Hide
  • Breadcrumbs: Show / hide.
2.Title Position:

you can manage title position at left, right, center.

3.Breadcrumbs Position: Manage Breadcrumbs position- Above title, Below-title, opposite of title.

4.Top & Bottom Padding: Allowes you to control top and bottom padding in bredcrumb from title text. example: padding: 10px;

5.Background: Control Subheader and Breadcrumbs background by giving color, image, video,etc.

  • Background Type: Image,Color,etc.
  • Gradient Color 1
  • Gradient Color 2

6. Title Tag: you can set your title tag size by defining Heading property elements. Select title heading tag from drop down, you can control heading tag size from typography TOTO Theme Options.

7.Breadcrumbs Separator: It  gives you the ability to disable them completely so they no longer display.