How do you change the header layout in a WordPress block theme and keep the menu fixed while scrolling?
In short: In Wiozen Theme you pick the header layout on the "Header layout" card in Appearance › Wiozen Theme › Customize: Classic, Centered or Compact. Only Compact stays at the top while the page scrolls; Classic and Centered scroll away with the page. The choice shows on the site as soon as you click "Save layout", and the default is Classic.
How the three layouts differ
The panel shows a one-line description under each layout. All five designs (News, Technology, Finance, Food and Guide) have the same three layouts; colors and fonts follow the design.
- Classic: a top bar, a logo band with a wide search box and a colored menu bar. The theme starts with this layout.
- Centered: a large centered logo, tools on the right and a centered menu.
- Compact: a single bar with the logo, menu and tools on one row that stays on top while scrolling.
In News and Finance the breaking news ticker sits below the header on its own. With Compact selected it isn't part of the bar and scrolls with the page.
Changing the header layout
- In the WordPress admin, open Appearance › Wiozen Theme and go to the Customize tab.
- On the "Header layout" card, click the layout you want.
- Click "Save layout" at the bottom of the page and reload the site in a new tab.
The choice is stored as a theme setting in the database. A theme update doesn't change it, and when you switch designs the new design opens with the same layout. These panel tabs open on a site connected to a Wiozen account with at least $5 in total top-ups.
How does the menu stay on top while scrolling?
In the Compact layout the design's stylesheet gives the bar position: sticky and top: 0. No JavaScript is involved; the browser's own sticky positioning keeps the bar on top, and nothing is redrawn as the page scrolls.
The most common reason a sticky menu breaks in a block theme is this: WordPress wraps the header in a template part container, and a sticky element can't leave its container. The container is only as tall as the header, so the menu scrolls away after a few pixels. With Compact selected, Wiozen Theme takes that container out of the layout with display: contents, so the bar stays on top to the end of the page. That's also why, when you build your own sticky menu in another theme, the menu has to sit at the top level of the template; the Position › Sticky option on WordPress's Group block only appears on top-level blocks too.
Changing the links in the menu
The layout decides where the menu sits, not which links it holds. You edit the links under Appearance › Editor › Navigation. If the demo content is installed, the header shows the demo menu. Removing the demo deletes that menu too, and WordPress shows a fallback menu until you build your own. Details are in the guide to removing demo content.
If you only want categories in the menu (since 1.1.1), turn them on in the "Categories in the menu" card under Appearance › Wiozen Theme › Settings and press "Save settings". The theme builds a menu from those categories and the header shows it; renaming or deleting a category updates the menu too. With none turned on, the menu above stays. If you edited and saved the header in the Site Editor, the card doesn't reach that header; reset the header first.
A header you changed in the Site Editor
If you open the header in Appearance › Editor and save it, it's written to the database with the blocks of the layout active at that moment. From then on the panel's layout choice no longer applies to that header; your changes stay as they are.
To go back to the panel's layout, tick the header on the "Customized templates" card in the Customize tab and click "Reset selected". Resetting deletes your manual changes to that part. The footer works the same way; see the footer guide.
Frequently asked questions
Can I make the Classic layout fixed while scrolling?
The panel has no switch for that. The layout that stays on top while scrolling is Compact; pick it if you want a fixed menu.
Does the Compact bar stay on top on phones too?
Yes. The sticky rule doesn't depend on screen width, so the bar stays on top on phones as well.
Does changing the layout change my posts or my menu?
No. The layout only changes how the header looks; posts, pages and the links in the menu stay as they are.
Will a theme update reset the layout I picked?
No. The choice lives in the theme setting in the database, not in the theme's files.
To try the three layouts on your own site, download Wiozen Theme for free. For the rest of the setup, see the news site guide.