Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. Change the Website Header Style and Design

Change the Website Header Style and Design

You have an extensive level of control over your header. The header style is just the first pioneering step to choose a specific kind of header layout style. You can then configure the other settings on top of it.

Following are the style options you get for the header general settings. Navigate to your website admin, browse to Appearance > Customize > Header > General.

  • Linear (Usually the default)
    • The default style for the header is linear.
    • A plain header with background, and with contents horizontally laid out from left to right
  • Linear Transparent
    • It’s the same as the linear but lets go of the background
    • As the background block is removed, the content below shifts a little upwards
    • You must know that the settings can possibly contradict with each other. For example, if you’re making advanced use of page title. Then linear transparent header and page title content will clash at the same screen
    • Nothing serious but just a word of caution for you to choose the best style for your site.
  • Branded
    • Placing the menus and social icons first, with an increased vertical space (padding)
    • Followed by a full-width 3px drop-shadow
    • Brings focus to the logo and website name
    • As it aligns the brand details in the center right after the drop-shadow
  • Minimal
    • Just like the linear
    • Except it minifies the menu, providing the toggle bar at the right-hand side for accessing the navigation
    • Clicking the toggle icon would pop open a menu centered around the page with full-screen overlay background
  • Centered
    • It centers the logo, menu, and other items.
    • But the overall content still remains linear, parallel to each other
  • Expressive
    • A pretty modern and neat style for businesses to use
    • It puts focus on the logo and brand with intelligent use of whitespace
    • Placing the main menu centered at a new position right below the logo with decent padding
    • Social icons, functions menu at the very right aligned in parallel to the logo
  • Hidden/Custom
    • If no layout suits your purpose, no issues.
    • You can upload your own layout through the use of this option.

Simply click on the drop-down menu under the “Header Style” label in General panel to choose the style of your choice.

Each option provides additional settings which we will cover below to get a complete understanding of the possible configurations.

These are the complete list of general configurations, a few header styles support most of these whereas a few header styles support only a few.

Padding

You can set the padding space for the header in pixels. You are provided with 4 input boxes namely Top, Right, Bottom, and Left in respective order.

You can add different padding spaces or choose to add the same padding space for each of the inputs. You can also click over the chain icon, provided right after the input boxes.

The following setting is available for Centered, Minimal and Branded header styles.

Header Logo Menu Separator

It adds a vertical 1px colored border between the logo and menu, as a separator.

To add the separator, just click over the checkbox next to “Header Logo Menu Separator”.

This option is only available for the Linear Transparent header style.

Enable Bottom Header Border

It adds a border to the bottom of the header. To enable it, just click over the checkbox next to the “Enable Bottom Header Border”. 

The following setting is available for Centered, Expressive and Branded header styles.

Enable Full-Width Header

You can use this configuration option to change the given header to become a full-width header. A full-width header expands the header width to cover full-screen size.

Just click over the checkbox next to “Enable Full Width Header” to enable it.

The following setting is available for Centered, Minimal, and Branded header styles.

Height

To change the height of the header itself, you can easily use the slider to increase or decrease the header height.

Not all the header style support this setting, but Linear, Linear Transparent, Branded, Minimal, and Centered header style does provide this setting.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?