How do I set the header (scrolling, color, width)?

Step 1: Go to General options → Header

Click on General options in the left menu in WordPress and open the tab Header. At the top are the settings for the top bar, below that is the heading Header settings. There you will find the four options from this article. Click Update after making changes.

Fullwidth header (navigation)

By default, the logo and menu are as wide as the content of your pages, with space on the sides. If you enable Fullwidth header (navigation), the logo and menu will move to the edges of the screen. On a wide screen, the logo will be all the way to the left and the menu all the way to the right. The bottom bar and the message under the menu will follow the same width.

Fixed header: the menu scrolls with the page

The explanation for Fixed header (navigation) is: ‘Should the menu scroll with the page? Enable this option.’ With this option enabled, the header stays at the top of the screen while you scroll down. Your visitors will always have the menu at hand.

Why the first section gets extra space

With a fixed header, the header overlaps the top of the page. Therefore, the first section of each page automatically gets extra space at the top, so the menu does not cover your text. If you see a lot of empty space at the top, that is the reason.

Header color and Header color fixed header

You choose two colors from your branding:

• Header color: the color at the top of the page. Default is white.
• Header color fixed header: the color once a visitor has scrolled down more than 200 pixels. Default is the main color of your website. This only works with Fixed header (navigation) enabled.

The text color of the menu adjusts to the background color. You can read which colors you can choose in colors and fonts of your website.

Transparent over your hero

If you choose Header color as Transparent, the header will overlay the first section. If that section has a large photo, the photo and header will blend together. The menu will then be white. After scrolling, the header will take on the Header color fixed header, so the menu remains readable above the rest of the page.

Only with Fixed header

Without Fixed header (navigation), a transparent header does not overlay your photo, but simply sits above the page. You will see white text on a light background, which is unreadable. So choose Transparent only together with Fixed header, and ensure that the first section of each page has a dark photo or color.

Having trouble?

• There is a lot of empty space at the top of your page. With Fixed header, the first section gets extra space. That is normal. If there is a white section without content at the top, remove it.
• The menu is unreadable (white on white). You have chosen Transparent without Fixed header, or the first section is light. Enable Fixed header or choose a different Header color.
• The color does not change when scrolling. Fixed header is off, or both colors are the same.
• When logged in, the header falls halfway under the black bar of WordPress. Only you see this when logged in. Visitors are not affected.
• Can’t figure it out? contact us.

Frequently asked questions