How to build a custom header with blocks

BySupport Admin

Your header is the first thing customers see. It holds your logo, navigation, and shopping cart, helping visitors find their way around your store. Using the Kadence block-based builder, you can arrange these elements exactly where you want them without touching any code.

How to build your header

  1. Open the Customizer
    Log in to your WordPress dashboard. From the side menu, go to Appearance > Customize. Once the customizer loads, click on the Header tab.

  2. Understand the Header Grid
    At the bottom of your screen, you’ll see a grid divided into three rows: Top Row, Main Row, and Bottom Row.

    • Main Row: Usually holds your logo and primary links.

    • Top/Bottom Rows: Useful for announcements, social media icons, or a secondary menu.

  3. Add Elements
    Hover your mouse over any empty space in the grid and click the plus (+) icon. A list of available blocks will appear, such as Logo, Primary Navigation, Search Bar, or Cart. Click one to drop it into that section.

  4. Rearrange with Drag and Drop
    If you want to move your logo from the left to the center, simply click and hold the element in the grid and drag it to a different column or row.

  5. Customize Individual Blocks
    To change the look of a specific item (like the size of your logo or the color of your buttons), click the gear icon on that block within the grid. This opens the specific settings for that element in the left-hand sidebar.

  6. Check Mobile View
    Click the Tablet/Mobile icon at the bottom of the customizer. The header builder will switch to the mobile layout. Here, you can add a "Trigger" (the three-line hamburger menu) and decide how your mobile navigation looks.

  7. Publish Your Changes
    Once you are happy with the layout, click the blue Publish button at the top of the screen to make the changes live on your site.

Practical Examples

  • For Online Boutiques: Place your logo in the center of the Main Row. Put a Search bar in the top-left and the Shopping Cart icon in the top-right to keep the focus on shopping.

  • For Restaurants: Use the Top Row for your phone number and physical address. In the Main Row, add a "Button" block that links directly to your "Order Online" or "Reservations" page.

  • For Minimalist Stores: Keep everything in the Main Row. Put the logo on the left and a simple menu on the right, leaving the Top and Bottom rows empty for a clean look.

Troubleshooting

The mobile menu isn’t showing up.
Make sure you have added the Trigger block to your Mobile header grid. Without the Trigger, customers won’t have a button to click to open your menu on their phones.

My logo looks too small or too blurry.
Click the gear icon on the Logo block. Adjust the "Logo Max Width" slider to increase the size. For clarity, ensure you are uploading a high-resolution PNG or an SVG file.

The header is covering my page content.
You likely have the "Transparent Header" setting turned on. Go to Header > Transparent Header and toggle it off if you want your page content to start below the header rather than underneath it.

Quick Recap

Building a header is a matter of dragging blocks into the three-row grid and using the gear icons to style them. Always remember to check your mobile view before hitting publish, as most of your customers will likely visit from their phones.

Related guides:

  • Setting up your primary navigation menu

  • How to use the Transparent Header feature

  • Customizing the WooCommerce Cart icon

Similar Posts