Customizing the Header Design in WordPress with Crio

BoldGrid Crio provides several options for your WordPress website’s header style and location. These options are found in the WordPress Customizer.

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

Pro Feature
Crio Pro users have the ability to create custom page headers with more customization options than the Customizer created header.

Select the Header Position in WordPress

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.

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.

Header Container

You have options to put your WordPress 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. Each row can have a different container type.

Create Your WordPress Header Design

BoldGrid Crio, our newest WordPress theme, has unique tools to create diverse WordPress header designs. You can drag and drop elements around and see the changes in real time with the Customizer live preview.

Your WordPress website Header is made up of Rows, and you can have as many rows as you need. There are 3 types of elements you can add to your Header – Branding (Logo, Title, and Tagline), Menus, and Widget Areas. For more information on working with widgets, please read this article.

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 row click the red trash icon at the top of the row’s panel.

How to Change Column Widths

We recently added a control to specify column widths in the standard header. This allows you to have greater control over where your header elements appear. Each row should add up to 12 columns, but each row can have a different number of elements.

At this time the Customizer needs to be saved and refreshed in order to adjust the column width of elements when they are initially added. To ensure your site visitors do not see the changes before you’re ready, you should use the Customizer’s Save Draft function. Click the gear icon next to the blue Publish button to open the Action panel. Select the Save Draft radio button, and then click the blue Save Draft button.

Now that your changes are saved but not live, you should refresh your browser by pressing control + F5 on your keyboard or clicking the refresh icon in your browser. Then you will see the added elements and can adjust the columns as needed.

When you’re ready to make the updates public, simply click the gear icon again and select the Publish radio button to change the blue button text to Publish. Click the blue Publish button to finalize your update!

Working with the Initial Header Layout

Below is Crio’s initial header design, there is one row with two elements in it – Branding and Menu. Since each row should add to 12, each element is given a value of 6 and therefore uses half of the row. So in this starting example, the Branding would appear on the left half of the header and the Menu on the right half.

There are alignment arrows for the Branding and Menu and the alignment is relative to the column. This means aligning the Branding to the right will result in it being right aligned from the center of the header, the right edge of it’s 6 columns.

If you want your header centered, you will need to have the Branding and Menu in separate rows. First, you will need to remove the Menu from its current row by clicking the red trash can icon to the right of the Menu dropdown. Now only Branding shows in this panel. Click the center circle to align it in the middle of your header.

Next, click + Add Row to create a new row. Click into the new empty section and then click + Menu.

Click into the Menu dropdown, select your menu and click the center circle to align. The last thing we need to do is adjust the column widths for our new layout.

In order to properly see the elements in their new locations, the Customizer needs to be saved and refreshed. As mentioned previously in this article, we recommend using the Customizer’s Save Draft function to make sure your live site isn’t updated until you’re ready. Click the gear icon next to the blue Publish button to open the Action panel. Select the Save Draft radio button, and then click the blue Save Draft button. Then click the refresh icon in your browser, or click control + F5 on your keyboard to refresh the page.

After reloading you will see Row 2 Menu under Column Widths. Since in this case both Branding and Menu span the entire row, we want both rows set to 12. You will need to adjust the column widths for each of the 4 device screen sizes shown. The active screen size icon is shown in orange and defaults to large desktop.

Now we have a header with a centered site title, tagline, and menu.

The rows are drag and drop. If you’d like your menu above the branding, simply drag it up until it clicks into place at the top. You can have more than two elements in a row, but be careful how many you add – each element takes up more space than you realize!

Feel free to experiment with other configurations and alignments, there are many different layouts you can create with BoldGrid Crio’s advanced Customizer.

Congratulations!

You have completed the tutorial for editing the WordPress Header Design for your BoldGrid Crio website. Next, you may want to change your header background.