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 → Site Header Layout

Select a Header Layout

BoldGrid Crio, our newest WordPress theme, includes 9 pre-designed header layouts to choose from. Simply click on one and the live preview will update so you can see what works best with your site. Each layout can be further customized by choosing what Branding elements appear (Site Title, Logo, and/or Tagline).

How to Create a Custom WordPress Header Layout

If you prefer to create your own header using the Customizer, click the CUSTOM option at the bottom of the panel to open all available options.

Below is Crio’s initial header design, there is one row with two elements in it – Branding and Menu. Since each is set to use half of the space, the Branding would appear on the left half of the header and the Menu on the right half. You can drag and drop elements around and see the changes in real time with the Customizer live preview.

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.

Adjust Header Column Widths per Device

Using the sliders, you can adjust how much space each element in the header should use. To ensure your header layout displays correctly, there shouldn’t be any empty space or gaps between elements.

Above the sliders are 4 icons – click each one to review the device size settings. If you’d like all elements to use an entire row, simply click the checkbox below the sliders. Tablet and mobile have this checked by default.

Add or Remove Content

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. The alignment will be relative to the space defined in the Column Width section.

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.

Custom Header Example: Adding a Search Widget to your Header

Now that you know about more about the Custom Header Layout controls it’s time to put it into practice! This example demonstrates how to add a WordPress Search widget to your Custom Header.

First, locate the Header Row that contains your Branding and Menu items and add a new Widget Area.

Expand the Widget Area and click the Edit Sidebar button to start adding the Search widget to the new Widget Area.

Next, click the Add a Widget button and locate the Search widget in the list of available options. Click on the Search widget to add it to your Header Widget Area.

Once the Search widget is added click the blue Publish button to finalize the update. You should now see a WordPress Search widget positioned next to the Menu in your Header!

Troubleshooting

How do you add tracking code to the header?

Unfortunately, WordPress doesn’t have a super easy way to insert tracking codes into the header or footer of your site. There are lots of different solutions possible, but probably the easiest way is to use a free plugin like Header Footer Code Manager.

Many different tracking platforms also produce “official” plugins for WordPress, like Google Site Kit and Facebook for WordPress.

How to prevent the Sticky Header Logo from Resizing

By default, the sticky header is smaller than the regular header, to prevent it from taking up too much screen space from your page’s content. However, if you’d like to make sure that your logo does not resize in the sticky header, you can use the following Custom CSS rule to ensure it remains the same size. Navigate to Customize > CSS/JS Editor and paste this rule into your CSS Code field:

.header-top .bgtfw-sticky-header.bgtfw-stick .custom-logo-link .custom-logo {
	width: unset;
}

Congratulations!

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