Customizing the Header Design in BoldGrid Crio | BoldGrid Crio
Last updated on

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 AppearanceCustomize
  • In the Customizer menu navigate to Design → Header → Site Header Layout

Pro Features

Crio Pro users have the ability to enable a Sticky Header. 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. In the Customizer menu navigate to Design → Header → Sticky Header Layout. You can set the Sticky Header On or Off by using the toggle, then choose your desired layout.

Crio Pro also includes Custom Page Headers with more customization options than the Customizer created header. In the Customizer menu navigate to Design → Header → Page Headers to get started.

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).

WordPress Header Designs
BoldGrid Crio Header Layouts

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.

Header Column Controls

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.

WordPress Header alignment tools

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.

When you’re ready to make the updates public, simply click the blue Publish button to finalize your update!

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.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

4 thoughts on “Customizing the Header Design in WordPress with Crio

  1. I watched the video above in the hopes of learning how to manage column widths in the header. I dont see the column sliders referred to in the beginning of the video. (customize –> design –> header –> layout) Is there a switch I need to to turn on or is this a pay feature?

  2. I have a Main Menu configured, as well as a Social Icons Menu… I have my main menu added to the header, but when I attempt to add a second menu to the header and want to select the Social Icons menu, it’s grayed out and I cannot select it?? Is there something I’m doing wrong? I’m not sure why the social icons menu is grayed out??

    • Hi Doug-
      Based on what you described, it sounds like your Social Menu is already assigned to another menu location, most likely in the footer. You can create a new menu with “Custom Links” to your social profiles and assign that one to the second header location, or you can re-assign your social menu to the new header location.

Leave a Reply

Your email address will not be published. Required fields are marked *