Reign keeps its header, colour and dark mode settings in the WordPress Customizer, mostly under Customize > Header and Customize > Color Options, and you can set all of them without code. The order that saves the most time is palette first, then light and dark mode, then the header (layout, topbar, sticky menu, mobile menu), then a check on a real phone. This guide walks through each of those settings, what the docs say they do, and the mistakes that cause most “my header looks wrong” questions.
Everything here comes from the theme’s own documentation, read in October 2026. Menu labels can shift between releases, so if a label on your screen differs a little, follow the docs on reigntheme.com.
In this guide
- Where do the header, colour and dark mode settings live?
- What does the Header Layout setting control?
- How do header icons and menu hover work?
- How does the sticky header behave?
- What is the topbar for?
- How do logged-in and logged-out menus work?
- How do the colour layers work?
- How do you turn on dark mode?
- How do you make the header work on a phone?
- A settings table
- A 390px mobile checklist
- Questions people ask
Our earlier post on Reign theme customization covers brand colours, fonts, the logo and the footer in general terms. This one stays on the header, the colour system’s moving parts, dark mode and phones, and goes deeper on each.
Where do the header, colour and dark mode settings live?
Almost all of them are in the Customizer. Reign Settings, the theme’s admin screen, handles the licence, plugin installs, integration status and maintenance, and its Design screen is a launch point that opens the Customizer for you.
That distinction trips people up. The docs say Reign Settings is “not where you change how the site looks.” If you go there looking for a header toggle you will not find one. Open Appearance > Customize, or use the Design screen’s cards for Colors, Typography, Header, Layout and Dark mode images.
These are the Customizer areas this post covers:
- Customize > Header > Layout for the header style, icons and menu hover.
- Customize > Header > Sticky Menu for the pinned header.
- Customize > Header > Topbar for the strip above the header.
- Customize > Header > Mobile Menu for phones and tablets.
- Customize > Header > Left Panel for the optional slide-in side navigation.
- Customize > Color Options for the palette, individual colours, dark mode colours and the light and dark switch.
One exception sits outside the Customizer. Swapping photos, illustrations or banners for dark mode happens in Reign Settings > Design, in the “Dark mode images” card, which pairs a light image with its dark equivalent.
If you have not installed Reign yet, start with how to install Reign and import a demo. The settings below assume a working install with a menu assigned.
What does the Header Layout setting control?
It controls where the logo, the menu and the icons sit relative to each other. You find it at Customize > Header > Layout, where a visual picker lists the header styles, labelled v1, v2, v3 and so on.
The docs give one piece of advice about the picker: test each layout against your actual menu and logo. A layout that looks balanced in a demo can feel cramped with longer menu items and a wide wordmark.
A few other behaviours hang off the layout choice.
Header Search Style
This control appears only when WooCommerce is active and the layout is set to v4. It decides what the search box in that layout searches. “Product Search” searches products. “Default Search” uses the standard WordPress search.
The same control has a second job on sites that run both WooCommerce and BuddyNext. There it decides what the header search icon does on every layout. “Product Search” keeps product search, and “Default Search” switches the icon to BuddyNext’s community search. If you run a shop and a community on one site, decide which one the search icon should serve before you launch, because members will use it without thinking about it.
How do header icons and menu hover work?
Header icons are a sortable list in Customize > Header > Layout called “Header Icons Options”. Drag an icon up or down to change its position. The change affects desktop only.
Which icons appear depends on what is active on the site:
- Search and User Menu / Login / Register are always available.
- Cart appears when WooCommerce or Easy Digital Downloads is active.
- Message, Notification and Friends Request appear when BuddyPress or BuddyNext is active. Friends Request is BuddyPress only.
- Light / Dark Toggle can be dragged into the list, so the light and dark switch sits among the other icons instead of after them.
The mobile header has its own icon order, so reordering the desktop list does nothing to phones. Set both, or accept that they will differ. The docs call a difference between desktop and phone icons expected.
Main Menu Hover Style
This setting changes how a top-level menu item responds when a visitor points at it. It applies to the desktop menu only. There are several hover styles to choose from, and if you leave it at “ - Select Style - ” the theme’s base styling applies with no extra effect.
Pick one and test it with the colours you chose, because the hover colour comes from the main menu colour controls covered later in this post.
Wrap overflow menu items into a More dropdown
This is on by default. Menu items that do not fit on one line move into a “More” dropdown instead of wrapping onto a second line or running off the edge.
Leave it on for most sites. The only reason to turn it off is a short menu where you would rather items wrap or disappear than hide behind a “More” label. If a member tells you an item is missing from a long menu, this is the first place to look, and the item is usually in that dropdown.
How does the sticky header behave?
The sticky header pins the header to the top of the screen as a visitor scrolls. It is controlled by “Sticky On Scroll” in Customize > Header > Sticky Menu, and it is on by default.
There is a second switch under it, “Customize Sticky Menu Style”, which is off by default. With it off, the stuck header inherits the colours of the normal header. With it on, the stuck header uses its own colours, independent of the normal header.
When you turn the style switch on, these controls become available:
- Header Background Color
- Site Title colour
- Sticky Header Logo, an alternate logo shown only while the header is stuck (the docs say it does not apply when Header Layout 4 is active)
- Menu Item Font Color, and its Hover and Active versions
- Menu Item Background for Hover and Active
- Icon Color and Icon Color [Hover], which cover the search icon, user menu and other header icons
The transparent header problem
The docs name one common failure. A normal header that is transparent or light, sitting over a hero image, becomes hard to read once it sticks over page content, because nothing behind it provides contrast.
The fix is to turn on “Customize Sticky Menu Style”, then set a solid header background and a menu text colour with enough contrast. Test it by scrolling a content page, not by looking at the top of the homepage. The homepage hero hides the problem, and a long post shows it.
What is the topbar for?
The topbar is a thin strip above the main header for contact details and social links. You find it at Customize > Header > Topbar, and it stays hidden until it has content.
That last point catches people. “Enable Topbar” turns it on, but the docs say the topbar renders nothing until you add at least one Info Link or Social Link.
- Info Links are a repeater for things like a phone number, an email address or an office location. Each row has a title, an icon entered as a full Font Awesome tag, and an optional link. Use
tel:for phone numbers andmailto:for email. - Social Links are a second repeater with a title, a Font Awesome icon tag and the full profile URL.
Info links always appear before social links, whatever order you added them in. There is also a “Sticky Topbar” switch, off by default. Turn it on and the topbar stays pinned with the header while the visitor scrolls.
The topbar on a phone
A phone has room for one row. Two controls manage that. “Disable Topbar On Mobile” removes the strip entirely on small screens. “Mobile Topbar Content” appears when you have not disabled it, and lets you show info links only, social links only, or both. The docs note that picking one side keeps the bar a clean, fixed height on phones, and that choosing both can wrap if you have several links.
The docs recommend restraint: a few high-value details beat a dozen icons crowded into one strip.
How do logged-in and logged-out menus work?
The theme registers separate menu locations for logged-in and logged-out visitors, so members and guests can see different navigation. You assign menus to those locations in Appearance > Menus, under Menu Settings.
The locations, as the docs list them:
- Primary, for logged in and logged out, is the main header menu.
- Left Panel, for logged in and logged out, is the slide-in side menu.
- Mobile Menu, for logged in and logged out, is the menu on phones and tablets.
- User Profile is the dropdown under a member’s avatar.
- With BuddyNext active, a BuddyNext Community Nav location also appears, showing a navigation bar on community pages.
The simplest setup is one menu assigned to both Primary locations. To show guests different links, build a second menu of public pages only and assign it to the logged-out location.
Mobile menu fallback
You can create a separate phone menu and assign it to both Mobile Menu locations. If you do not, phones use the logged-in Primary menu, so a guest on a phone may see links meant for members.
The User Profile dropdown
For a community site, create a “Profile” menu and assign it to User Profile. With BuddyNext, add its items from the BuddyNext box. The docs give two warnings. Avoid custom links that contain a username, because every visitor would reach that one person’s page. And do not add a Log Out link, because BuddyNext adds one automatically.
The docs list three problems that come up here. Guests who see the member menu usually have a menu in the logged-out Primary location they did not intend, since both Primary locations are set separately. A duplicate Log Out in the dropdown means you added one by hand. A “Page not found” in the dropdown means an old custom link is still in the menu, and the fix is to delete it and use the BuddyNext box.
The Left Panel follows the same rule. Logged-in visitors see the menu assigned to the Left Panel location, and everyone else sees the one assigned to Left Panel (Logged Out). If the panel is missing, the location matching the visitor’s login state has no menu. The panel’s global switch, “Left Panel - Global Setting”, is on by default, but nothing appears until a menu is assigned.
Which BuddyNext items go in the menu is a bigger decision than the settings. Keep Your Reign Site, Upgrade the Community shows how the two fit together, and BuddyNext is where the community side is described.
How do the colour layers work?
The colour system is four sections under Customize > Color Options, and each narrower section overrides the broader one beneath it. The palette sets the baseline, and a colour you set by hand wins for that one element.
- Color Palette is a single picker that sets colours across the whole site, including the dark version. For most sites it is the only colour decision needed.
- Individual Colors are per-element controls, light mode only. Overrides are stored per palette, so switching palettes does not erase work you did on another one.
- Dark Mode Colors cover the same elements, but apply only in dark mode.
- Light & Dark Mode contains no colours. It holds the switch, the default mode, the switch position and the dark logo.
The presets named in the docs are Default, Minimal, Clean, Emerald, Indigo, Rose, Amber and Midnight. Each previews its background, accent, text and surface colours before you choose it. Default keeps your current colours, so choosing it does not reset anything.
The header and menu colour controls
These are the controls you will touch most when tuning a header. They sit in Individual Colors for light mode and in Dark Mode Colors for dark mode.
- Header: Header Background Color, Site Title Font Color, Header Icon Color, Header Icon Color [Hover].
- Main menu: Main Menu Item Font Color, with Hover and Active versions, and Main Menu Item Border OR Background Color for Hover and Active.
- Sub menu: Sub Menu Item Background Color, Sub Menu Item Font Color, and Hover versions of both.
- Mobile menu: Mobile Panel Background Color, Mobile Menu Color with Hover and Active versions, and Mobile Menu Background Color [Active].
Menu typography is separate. Customize > Typography > Individual Fonts has “Header Main Menu” and “Header Sub Menu” fields, along with Site Title and Site Tagline. A font preset also sets the menu font, and the docs note that presets never set font size, so set a menu size by hand if you want a specific one. Changes in Individual Fonts take priority over the preset.
Why a palette change seems to skip an element
This is the question behind most colour support requests. The docs give two causes.
The first is a per-palette override that already exists. It persists for that palette even after you switch away and back. Fix it by editing the field in Individual Colors, or by clicking the reset arrow on the picker to return to the palette’s value.
The second is an element that is wrong only in dark mode. That one is fixed in Dark Mode Colors, not in the palette or in Individual Colors.
The habit that follows: choose the palette first and override only where you need to. Colours pinned by hand do not change when you switch palettes later.
How do you turn on dark mode?
Dark mode is a light and dark switch plus a default mode, set at Customize > Color Options > Light & Dark Mode. The dark colours come from your palette, so choose the palette first.
The settings in that section:
- Show Light / Dark Switch turns on a sun and moon button in the header, and in the mobile menu depending on the next setting. Visitors’ choices are remembered on return visits.
- Switch Position sets where the button appears: header and mobile menu, header only, or mobile menu only.
- Default Mode sets whether a first-time visitor who has not chosen a mode sees light or dark.
- Dark Mode Logo is an optional second logo shown only in dark mode. Set your main logo under Site Identity > Logo first.
Steps to set it up
- Choose a palette in Color Options > Color Palette. Its dark version is generated for you. To confirm it worked, the palette preview should show the colours you expect.
- Turn on the switch and pick a position. To confirm it worked, open the front end and look for the sun and moon button at the screen size you are testing.
- Set the default mode for first-time visitors.
- Add a dark logo if your normal logo disappears on a dark header.
- Drag the toggle into place among the header icons, if you want it somewhere other than the end. The docs say you can do this in both the header and the mobile header icon settings.
- Publish, then test in a private window. To confirm it worked, the default mode should appear for a fresh visitor. Click the toggle, reload, and the choice should stick.
Test a page with a large photo at the top and a page with a form. The docs say leftover Individual Colors overrides are most likely to look wrong in only one mode there.
What to do when dark mode looks wrong
- No button: check that the switch is on and that its position includes the screen size you are testing.
- Logo disappears: upload a Dark Mode Logo.
- An area stays light: a manually set colour may be overriding the palette. Fix that colour in Dark Mode Colors.
- Photos look harsh on a dark page: use the “Dark mode images” card in Reign Settings > Design to pair a light image with a dark one.
The docs also note that some plugins follow dark mode, including wpForo forums and IdeaPush boards, forms, filters and popups. If you run either, include those pages in your test.
Open Dark Mode Colors only if something still needs a dark-specific fix. It covers the background, text, header, menu, button and footer colours used only in dark mode, and it starts from your palette, so most sites never need it.
How do you make the header work on a phone?
Phones and tablets have their own header settings, separate from the desktop header. They live at Customize > Header > Mobile Menu, and the Customizer’s phone-width preview, reached by the phone icon at the bottom of the left panel, lets you see the result as you go.
Before you start, set your main logo under Site Identity and assign your menus. If you want a separate mobile logo, prepare it first. The docs note that a simpler or square version often works better on a small screen.
Mobile Header Layout
Layout One places the header icons in a second row below the logo. Layout Two, the default, shows the icons inline with the logo in one row and uses less vertical space. The docs note that Layout Three is unavailable when BuddyNext is active.
Layout Two is usually the better choice unless your icon set is too wide to fit beside the logo at your logo size. A longer icon list, for example search, messages, notifications, cart and the dark toggle, is where Layout One’s second row earns its keep.
Mobile logo and logo size
“Use a Custom Mobile Logo” is off by default. When you enable it, a “Mobile Logo” field appears, and phones use that image instead of the scaled desktop logo. It helps when a wide desktop wordmark does not read at small sizes.
“Logo Size” sets the maximum height of whichever logo shows on mobile and tablet, independent of the desktop logo size. The phones how-to gives the range as 45 to 75 pixels.
Mobile Menu Width
This sets the width of the slide-out panel on tablets, from 40% to 100% of the screen. It applies from 640px screen width up, and phones always get a full-width panel. The default is 100%, and the docs suggest 70% to 80% for short menus.
Mobile Header Icons Options
This is the sortable list, separate from the desktop one. It offers the same icons as the desktop list, including the Light / Dark Toggle. If you want the dark toggle on phones, drag it in here, or set the switch position to include the mobile menu.
Common phone fixes
- Crowded icons: reduce Logo Size, remove an icon, or switch to Layout One.
- Mobile logo missing: confirm the custom logo option is on and an image is uploaded.
- Tablet menu too wide: lower Mobile Menu Width.
- Different icons on desktop and phone: this is expected, because the two lists are separate.
Speed matters on phones too, and the Reign performance guide covers how to keep a community site quick.
A settings table
This table lists settings the Reign docs describe, where to find them and what each does.
| Setting | Where to find it | What it does |
|---|---|---|
| Layout | Customize > Header > Layout | Sets where the logo, menu and icons sit relative to each other |
| Header Search Style | Customize > Header > Layout (WooCommerce active, layout v4) | Chooses Product Search or Default Search; with BuddyNext and WooCommerce both active, also sets what the search icon does |
| Header Icons Options | Customize > Header > Layout | Drag-to-reorder list of desktop header icons |
| Main Menu Hover Style | Customize > Header > Layout | Sets the desktop menu hover effect from Hover Style 1 to 6 |
| Wrap overflow menu items into a More dropdown | Customize > Header > Layout | Moves menu items that do not fit into a “More” dropdown; on by default |
| Sticky On Scroll | Customize > Header > Sticky Menu | Pins the header to the top of the screen; on by default |
| Customize Sticky Menu Style | Customize > Header > Sticky Menu | Gives the stuck header its own colours and logo; off by default |
| Enable Topbar | Customize > Header > Topbar | Shows the strip above the header once you add an info or social link |
| Sticky Topbar | Customize > Header > Topbar | Keeps the topbar pinned with the header; off by default |
| Disable Topbar On Mobile | Customize > Header > Topbar | Removes the topbar on small screens |
| Mobile Topbar Content | Customize > Header > Topbar | Shows info links, social links or both on phones |
| Mobile Header Layout | Customize > Header > Mobile Menu | Layout One puts icons in a second row; Layout Two puts them inline with the logo |
| Mobile Menu Width | Customize > Header > Mobile Menu | Sets the tablet slide-out panel width from 40% to 100%; phones stay full width |
| Use a Custom Mobile Logo / Mobile Logo | Customize > Header > Mobile Menu | Uses a separate image on mobile instead of the scaled desktop logo |
| Logo Size | Customize > Header > Mobile Menu | Sets the maximum logo height on mobile and tablet |
| Mobile Header Icons Options | Customize > Header > Mobile Menu | Drag-to-reorder list of mobile icons, separate from desktop |
| Left Panel - Global Setting | Customize > Header > Left Panel | Master switch for the side panel; shows once a menu is assigned |
| Color Palette | Customize > Color Options > Color Palette | Sets site-wide colours, including the dark version |
| Individual Colors | Customize > Color Options > Individual Colors | Per-element colour overrides for light mode |
| Dark Mode Colors | Customize > Color Options > Dark Mode Colors | Per-element colour overrides for dark mode only |
| Show Light / Dark Switch | Customize > Color Options > Light & Dark Mode | Adds the sun and moon button |
| Switch Position | Customize > Color Options > Light & Dark Mode | Header and mobile menu, header only or mobile menu only |
| Default Mode | Customize > Color Options > Light & Dark Mode | Sets what a first-time visitor sees |
| Dark Mode Logo | Customize > Color Options > Light & Dark Mode | Optional logo shown only in dark mode |
| Dark mode images | Reign Settings > Design | Pairs light images with dark equivalents |
| Header Main Menu / Header Sub Menu | Customize > Typography > Individual Fonts | Sets menu fonts, which override the font preset |
A 390px mobile checklist
390 pixels is a common phone width, and it is where header problems show first. The docs say most first-pass mistakes show up in the header on phones, and that a narrowed desktop window is only an approximation, so use the Customizer preview and then a real phone.
- The logo is fully visible and not cropped, in both light and dark mode.
- The icons fit on the chosen layout without crowding the logo. If not, reduce Logo Size, drop an icon or switch to Layout One.
- The menu button opens the panel, the panel lists the right links, and it closes again.
- Pressing Escape closes the panel and returns focus to the menu button, as the docs describe.
- A guest in a private window sees the logged-out menu, and a member sees the logged-in menu.
- The avatar dropdown opens for a member and has no duplicate Log Out or broken links.
- The topbar shows one clean row, or is disabled on mobile.
- The sticky header stays readable while you scroll a long content page, not just the top of the homepage.
- The light and dark toggle is present where you placed it, and the choice survives a reload.
- A page with a large top photo and a page with a form both look right in dark mode.
Questions people ask
Do I need code to change the Reign theme header?
No. The layout, icons, hover style, sticky behaviour, topbar and mobile menu are all Customizer settings under Customize > Header.
Why does my sticky header look different from my normal header?
Because “Customize Sticky Menu Style” gives the stuck header its own colours when it is on. With it off, the stuck header inherits the normal header’s colours. A transparent header over a hero image is the usual cause of an unreadable sticky header, and a solid background fixes it.
How do I turn on dark mode in Reign?
Choose your palette, then go to Customize > Color Options > Light & Dark Mode and turn on “Show Light / Dark Switch”. Set the switch position and default mode, add a Dark Mode Logo if your logo vanishes on dark, and test in a private window.
Why did changing the palette not change one element?
A colour set by hand overrides the palette for that element, and it persists even if you switch palettes. Reset it with the arrow on the colour picker, or edit it in Individual Colors. If it is wrong only in dark mode, fix it in Dark Mode Colors.
Can members and guests see different menus?
Yes. The theme registers separate logged-in and logged-out locations for the Primary, Left Panel and Mobile Menu menus. Assign a public-pages menu to the logged-out locations, and check both Primary locations, since they are set separately.
If you are still choosing a theme for a community site, what you can build with Reign shows the range, and if you are moving from another theme, changing your community theme without losing members covers the safe order of steps. The full Reign page is at reigntheme.com/reign-theme.