Site Header

Design your site header with dynamic sticky and transparency options.

How To Use

Visit Customizer > Theme Settings > Site Header.
Enable/disable any features you'd like.
Enable/disable and rearrange any Mobile Header features you'd like.
Publish/save and view your site.

Settings

Enable Sticky Header

Enables a sticky header to keep your site header at the top of the page when scrolled.

Notes:

The sticky header is designed to automatically resize so it won’t take up as much screen real estate. View the logo spacing settings in Customizer > Site Identity to set the amount of “shrink” when a sticky header scrolls.
The sticky header is intentionally disabled on mobile. User studies and other analytics/data show that sticky headers on mobile cause a higher bounce rate, lower conversions, and generally are annoying to users. If you absolutely need a sticky header on mobile it will require custom CSS.

If you understand the negatives from above and still want a sticky header on mobile, you can add this CSS to Customizer > Additional CSS:

.has-sticky-header {
    --site-header-position: sticky;
    --site-header-top: var(--body-top);
    --site-header-box-shadow: 0 0 24px rgba(0, 0, 0, 0.07); /* optional */
}

Enable Transparent Header

Enables a transparent header for an invisible header design. This header style will only display on pages that have a Page Header or a Group/Cover block set to “Full Align” as the first block in the content.

Transparent header is best utilized when you have an overlay color or image on your pages and posts.

Mobile Header

Show/hide and re-order mobile header elements. Show your logo on the left/right or centered, add search icon, or add custom content including account links, cart icon with cart total, etc. to the mobile header.

Custom Content

When the “Custom Content” setting is enabled you have the freedom to use whatever content or shortcodes you’d like for the mobile header.

Some useful examples:

Cart Icon with Cart Total

[mai_icon icon="shopping-cart" cart_total="true" link="https://bizbudding.com/cart/"]

[mai_icon icon="shopping-basket" cart_total="true" link="https://bizbudding.com/cart/"]

Account Icon

[mai_icon icon="user" link="https://bizbudding.com/my-account/"]

Click to Call Icon

[mai_icon icon="phone" link="tel://1-555-555-5555"]