Header

The Header of the Gridd theme is unlike any other header. You can place it anywhere you want, and using its own grid control you can build it however you like. It can be as minimal or complex as you want and you can even use it on the left or right of your layout simply by changing its position in your main grid setting.

Dedicated Header Grid

Your header contains a dedicated grid you can use to build your own unique layouts.

You can see separate documentation on how the grid control works in this article.

Though the header includes a grid control just like your main grid, it contains a collection of grid parts that are globally available, and some other grid-parts that have been tailor-made for use in the header.

You can see the separate documentation articles for each of these grid-parts from the below links.

Header Mobile Grid

Gridd Plus users can edit the settings for mobile grids separately.

Remove grid-parts that may clutter the mobile experience or create a completely different layout and optimize your site’s mobile presence.

Maximum Width

The Max-Width control allows you to define a maximum width for your header grid.

If you’re building a “boxed” layout you can use this option to define the width of your header’s container.

Grid Gap

If you want to add some spacing between your header grid-parts, you can use this setting by typing a valid CSS value.

If you have defined a global background color for your header, it will be visible through these gaps providing some more visual separation.

Drop Shadow Intensity

Make your header stand out by adding a shadow to it.

You can select the intensity of the shadow, or simply set to “None” to disable the shadow.

If you want your header to stick to the top of the page, you can enable that feature using these settings

We use a CSS-only implementation for sticky headers so your site doesn’t load any unnecessary scripts.

Please note that the “Sticky on Small Devices” option is only accessible if sticky header is enabled for large devices.

We recommend you only enable the sticky option if your header is thin. Enabling sticky headers on mobile should be avoided since real-estate is at a premium in small screens.

Background Color

Use this setting to add a global background color to your header.

Individual grid-parts inside your header all have their own separate and independent background color setting. However, if they use a semi-transparent or completely transparent background color then the global header background will be visible underneath them.

Background Image

Upload multiple images to be used as background images using the background-image control.

If a .png image is used with a transparency, then the selected background-color will be visible underneath the transparent parts of the image.