1. Home
  2. Docs
  3. Customization
  4. Header Builder

Header Builder

Suki has Header Builder feature that gives you full control to set layout of your header in desktop, tablet, and also mobile devices. To open Header Builder you can go to Appearance > Customize > Header.


Desktop Header Builder

In Desktop Header, you have 3 header section:

  • Top Bar
  • Main Bar
  • Bottom Bar

The available options for each header section are:

  • Merge inside Main Bar wrapper ( Top Bar and Bottom Bar only )
  • Layout
  • Height
  • Padding
  • Border
  • Spacing between elements
  • Text typography
  • Menu link typography
  • Submenu link typography
  • Icon size
  • Background color
  • Border color
  • Text color
  • Link text color
  • Link text color :hover
  • Link text color :active
  • Submenu background color
  • Submenu border color
  • Submenu text color
  • Submenu link text color
  • Submenu link text color :hover
  • Submenu link text color :active
  • Top level menu items highlight
  • Highlight color :hover (if you set the top level menu items highlight)
  • Highlight text color :hover (if you set the top level menu items highlight)
  • Highlight color :active (if you set the top level menu items highlight)
  • Highlight text color :active (if you set the top level menu items highlight)

You have 11 different locations where you can put the header elements:

At the bottom of header builder, you’ll find the list of unused header elements. Simply drag and drop the element you want into header location..

Here are the list of header elements that you can put into Desktop Header Builder:


Mobile Header Builder

Suki also has dedicated Mobile Header layout which will replace the Desktop Header on tablet and mobile devices.

In Mobile Header, you have 4 different locations where you can put the header elements:

  • Mobile Main Bar Left
  • Mobile Main Bar Center
  • Mobile Main Bar Right
  • Mobile Drawer (Popup)

Here are the list of header elements that you can put into Mobile Header Builder:

The Mobile Drawer (Popup) location will be displayed when Toggle element is clicked. So you need to add the Toggle element somewhere in the Mobile Main Bar.

Note: Some elements are only allowed to be put into some specific locations.

The available options for mobile main bar are:

  • Height
  • Padding
  • Border
  • Spacing between elements
  • Icon size
  • Background color
  • Border color
  • Link text color
  • Lint text color :hover

The available options for mobile drawer (popup) are:

  • Display
  • Position
  • Alignment
  • Width
  • Padding
  • Spacing between elements
  • Text typography
  • Menu link typography
  • Submenu link typography
  • Icon size
  • Background color
  • Border color
  • Text color
  • Link text color
  • Link text color :hover
  • Link text color :active
Was this article helpful to you? Yes No 1