In this article:
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!
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.
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.