Set up the header navigation

Theme options

The header is configured at AppearanceCustomizeTheme OptionsNavigation, which is split into five tabs: General Settings, Category Sub Menu, Mobile Settings, Bookmarks Sub Menu, and Custom Code.

The menu itself is not here. Build it at AppearanceMenus and assign it to the Navigation Menu location, otherwise the header shows a notice reminding you to create one.

#General settings

Turns the whole header bar off, for a landing page that does not need one.

Stretches the bar to the window width instead of the content container.

Hides the bar as you scroll down and brings it back as you scroll up.

Default scrolls the bar away with the page, Sticky keeps it pinned to the top.

Show the logo in the bar and set its width. Upload the logo files in the Branding section.

Adds the light and dark mode switch.

One toggle per icon on the right-hand side of the bar. The cart needs WooCommerce; the offcanvas panel shows whatever you put in the Offcanvas sidebar widget area.

#Add an account icon and point it at a login page

The account icon is off by default. Turn on Display Account Icon in the General Settings tab, and the icon appears next to search and bookmarks. It reads Sign in for visitors and My account for logged-in users.

Where it sends people depends on Account URL, the field directly below it:

  • Leave it empty and the theme uses your WooCommerce account page, or the Paid Memberships Pro account page if that is what you run. With neither plugin active it falls back to the standard WordPress login screen.
  • Fill it in to send people anywhere you like, which is how you point the icon at the login page below.

#Editing the login page

The login page that ships with the demo content is a normal WordPress page built with Elementor, using the theme Login / Register Form widget. Open the page, click Edit with Elementor, then select the form to reach its settings:

Adds the registration tab beside the login tab. New accounts are created with the Subscriber role.

Where a visitor lands after signing in. Empty sends them to the home page.

Everything around the form, including the logo, the heading, and the terms links, is regular Elementor content you edit on the canvas.

#Mobile, sub menus, and custom code

The Mobile Settings tab has its own toggles for the mobile logo, its width, the color switcher, and the copyright line inside the mobile menu.

Category Sub Menu and Bookmarks Sub Menu control what shows on the post cards inside those dropdown panels: thumbnail, category label, title tag, date, author, and activity counters.

Custom Code gives you six insertion points inside the header (before and after the logo, the menu, and the action icons) for a shortcode or a snippet of markup.

Last updated

Was this article helpful?

FIND THE ONE THAT FITS YOUR PROJECT

Import a demo, swap the content, adjust the layout. Modern WordPress under the hood, fast even when the site fills up.