Header

Header Settings

  1. Admin label: this helps you identify better than you did with this element. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the element you have added. This will surely save you from a lot of hassles.
  2. Text align: This feature allows you to set the horizontal alignment of a text. A text can be left or right-aligned, or centered.
  3. Custom class: Write the class name used for writing custom CSS or JS.
  4. Custom ID: Give a custom ID to override the auto-generated ID

Design Settings

Under this tab the options are as follows:

  1. Background: Select a color or tick on the box "transparent" if you don't want a background color.
    - Background repeat: sets if/how a background image will be repeated.
    - Background size: specifies the size of the background images.
    - Background attachment: sets whether a background image scrolls with the rest of the page or is fixed.
    - Background position: sets the starting position of a background image.
  2. Upload an image if you're interested in decorating the background with an image.
  3. Border: set the thickness of the element border by entering numbers in boxes top, right, bottom, and left. 
    There are many border styles including solid, dashed, dotted, double. 
    Choose a color for the borderline.
  4. Spacing: Add margin and padding values over the row to improve its appearance on different devices. Spacing units are px, rem, em, and %.
  5. Custom color: select a custom color for the element or otherwise make it transparent. You can set a custom color for text, regular link, hover link and active link. 

Header Variations

Header Mode

TemPlaza framework offers you 3 header modes: Horizontal, Stacked, and Sidebar

I. Horizontal Menu Mode

When you select Horizontal mode then Horizontal Menu mode will appear with 3 options (Left, Center, or Right)

Horizontal Menu Left

 Select Left option will display header as the image below:

Horizontal Menu Center

 Select Center option will display header as the image below:

Horizontal Menu Right

Select Right option will display header as the image below:

II. Stacked Menu Mode

When you select Stacked mode then Stacked Menu mode will appear with 3 options (Stack Center, Stack Separated and Stacked Divided)

Stacked Center

Select Stacked Center option will display header as the image below:

Stacked Separated

Select Stacked Separated option will display header as the image below:

Stacked Divided

Select Stacked Divided option will display header as the image below:

III. Sidebar Menu Mode

When sidebar menu mode is activated, the main menu will display on the left or right sidebar with a burger menu button (it’s collapsible)

Sticky Header

In case you want the main menu to display when scrolling down, you can enable the sticky header option. Please go to Admin > Theme Options > Settings > Header > scroll down to the Sticky section > enable sticky

There are 3 sticky menu modes: Left, Center, and Right. The main menu items will be aligned to the left, right or in the center. You’re supposed to upload a sticky logo as well.