Sidebar-style header

Hi there,

The recommended approach now is to build a custom header using a GP Element and the Header/Navigation blocks. Here’s how:

1. Create the Header Element

Go to Appearance → Elements → Add New → Header. Select Hook as element type, then chose the wp_body_open hook.

In the GB block settings for your menu container, set display to flex with a flex direction of column. Set the width to your desired sidebar width (e.g., 300px) and the height to 100%. This gives you a vertical, full-height sidebar layout without any extra CSS.

3. Add CSS for fixed positioning

You can adjust the header settings from the GB editor to ahve these CSS values:

.your-header-element {
    position: fixed;
    top: 0;
    left: 0;
}

You would also set the menu block from you navigation to be flex with a column direction.

Important: Don’t use the GB sticky option for this — it’s designed for horizontal headers and will insert a placeholder div that creates unwanted whitespace in a vertical sidebar context.

The, you would need this CSS to shift the main site container on the right:

body {
margin-left: 300px;
}

4. Disable the default header

Create a Layout Element, apply it to the Entire Site, and disable the default header. This prevents any conflicts between your custom sidebar header and the original one. You would need to have the Disable Elements activated (Appearance -> GeneratePress) in order to view options to disable.

5. Handle responsive

At your mobile breakpoint, reset the layout so there is no left margin:

@media (max-width: 768px) {
    body {
        margin-left: 0;
    }
}

You’ll also want to adjust the GB responsive settings on the header block at that breakpoint — switch flex direction back to row, position to relative, width to 100%, and let the height be auto.