Customizing the Header Design in BoldGrid Crio

BoldGrid Crio provides several options for the header style and location. These options are found in the Customizer.

• In the Dashboard navigate to Appearance → Customize
• In the Customizer menu navigate to Design → Header → Layout

Select the Header Position

You can select the Header Position from the three different options here: Header on Top, Header on Left, or Header on Right. In the Left or Right positions you can set a fixed width by using the slider under Header Width. Enabling the Sticky Header is strongly recommended for these layouts.

Sticky Header

Pro Feature

The Sticky Header makes the header portion of the site remain fixed at the top of the screen when scrolling up and down the page. You can set the Sticky Header On or Off by using the toggle.

Create Your Header Layout

BoldGrid Crio has unique tools to create diverse Header layouts. You can drag and drop elements around and see the changes in real time with the Customizer live preview.

Your Header contains Sections made from the elements Branding (Logo, Title, and Tagline), Menus, and Widget Areas. A Section is like a row in the Header. Each Section can have a different number of elements and use a different container type. Use the 9 way directional arrows to align each element appropriately.

Clicking the red Trash icon next to an element will remove only that element, to remove the entire Section click the red Trash icon at the top of the Section panel.

Header Container

You have options to put the Header content in either a Fixed Width container or Full Width. This refers to the container the content resides in, allowing you to change your header’s look and feel.

• To ensure you do not lose them, Click on Publish to save your changes

Congratulations! You have completed the tutorial for editing the Header Layout for your BoldGrid Crio website.