Site Header

Header > Site Header

Enable Sticky Header

Check on Enable Sticky Header to keep your site header at the top of the page when scrolled.

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.

Enable Transparent Header

Check on Enable 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 a 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.

Site Header with cart icon and cart total

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"]

Enable Sticky Header

Enable Transparent Header

Mobile Header

Need some help with your theme?

First Steps

Menus

Content Areas

Customizer

Blocks

Shortcodes

Advanced/Developers

Plugins