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
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).
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.
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.
Greg says:
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?
Jesse says:
Hi Greg-
The new adjustable column widths feature is included in the free version of the theme, but this is a very new feature. Make sure you’re using the most up-to-date version of Crio, version 2.4.2.
Doug says:
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??
Jesse says:
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.