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

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.

Create Your WordPress Header Layout

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

Your WordPress website 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.

For more information on working with widgets, please read this article.

Working with the Initial Header Layout

Below is Crio’s initial header layout, there is one Section with two elements in it – Branding and Menu. Each section functions as a row, and each element in a section is given equal space in that 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 50% column.

If you want your header centered, you will need to have the branding and menu in separate sections. First, you will need to remove the menu from its current section 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 Section 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. Now we have a header with a centered site title, tagline, and menu.

The sections 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 section, but be careful how many you add – each element takes up more space than you realize! In this example we have two branding and one menu in a single section. Since each element is given an equal amount of space, in this example each column is 33% of the header. In the first branding element we only checked Logo and in the second we only checked Site Title. The result is shown below.

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

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.

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

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