1. Home
  2. Docs
  3. Suki Pro Modules
  4. Alternate Header Colors

Alternate Header Colors

With Suki Pro, you can create secondary color scheme for your header and choose where you will use it. For example, your standard pages use light color scheme header, but you need to use dark color scheme header on some specific pages, you can set the dark color scheme via Alternate Header Colors. To activate this alternate header colors module, please go to Appearance > Suki > Alternate Header Color.

To configure the alternate header colors, please go to Appearance > Customize > Header > Alternate Header Colors. There are 2 groups settings, main header (desktop) and mobile header.

The main header (desktop) available options are

  • Alternate logo image
  • Background color for all header bars
  • Border color for all header bars
  • Text color for all header bars
  • Link text color for all header bars
  • Link text color :hover for all header bars
  • Link text color :active for all header bars
  • Highlight color :hover for all header bars (if you set the top level menu items highlight)
  • Highlight text color :hover for all header bars (if you set the top level menu items highlight)
  • Highlight color :active for all header bars (if you set the top level menu items highlight)
  • Highlight text color :active for all header bars (if you set the top level menu items highlight)
  • Transparent header: Background color for all header bars (available when Transparent Header module is active)
  • Transparent header: Border color for all header bars (available when Transparent Header module is active)

The mobile header available options are

  • Alternate mobile logo image
  • Background color
  • Border color
  • Link text color
  • Link text color :hover
  • Transparent header: Background color (available when Transparent Header module is active)
  • Transparent header: Border color (available when Transparent Header module is active)

After you set the alternate color scheme, you can choose the alternate header color scheme on specific pages via Dynamic Page Settings module.

For example:

This is the default header color for entire website.

And this is the alternate header color which is activated on specific page (contact page).

Was this article helpful to you? Yes No 1