Creating Your Navigation Menu

Accessing the Navigation Editor

1. Go to Appearance → Editor.

2. In the left sidebar, click Patterns.

3. Click the Header tab.

4. Select the Main Navigation pattern.

5. You’ll see the menu in the editor — click anywhere on it.

You are now editing the Navigation block directly.

Edit From Anywhere

Because your navigation is part of the Global Header, you don't always need to go into the Patterns menu.

• Edit on the fly: While editing any page or template in the Site Editor, you can click directly on the navigation menu to change it.

• Update Once, Apply Everywhere: Since the menu is a "Template Part," any change you make—whether adding a link or changing a button color—will automatically sync across every single page of your website.

Adding Menu Items

In the right sidebar, you’ll see the current menu items.

Adding a Page

1. Click the + icon at the bottom of the menu.

2. Select Page.

3. Choose a page from your site.

4. The page will be added to your menu automatically.

Adding a Custom Link

1. Click the + icon.

2. Select Custom link.

3. Enter the URL (example: https://yoursite.com/contact).

4. Enter the link text (example: Contact).

5. Press Enter.

Reordering Menu Items

You can easily change the order of menu items:

1. Hover over a menu item.

2. Grab the handle (⋮⋮) on the left.

3. Drag it up or down.

4. Release to drop it in the new position.

Creating Dropdown Submenus

Use dropdowns to organize related links.

How to create a submenu:

1. Click the menu item that should contain the dropdown (example: Dropdown).

2. In the toolbar, click the three dots menu (⋮).

3. Select Add submenu.

4. Click the + icon that appears under the parent item.

5. Add submenu items the same way you add normal menu items.

Adding a Button to Your Menu (CTA)

Want to highlight an important action like “Submit”, “Register”, or “Contact”?

1. Add or select a menu item.

2. In the right sidebar, scroll to the Advanced section.

3. Expand Advanced.

4. In Additional CSS class(es), enter one of the following:

   • is-style-outline → Outlined button style

   • is-style-fill → Solid filled button style

The menu item will instantly appear as a button.

🌓 Adding a Dark Mode Toggle to Your Menu

Listimia includes a built-in dark mode switcher that you can easily add to any navigation menu. This allows your visitors to toggle between light and dark modes with a single click.

Steps to Add the Toggle:

1. Open the Site Editor: Navigate to Appearance > Editor and select the template where your navigation menu is located (usually the Header).
2. Add a Custom Link: Click the (+) icon within your Navigation block to add a new menu item and select Custom Link.
3. Configure the Link:
   • URL: Set this to # (this prevents the page from reloading).

   • Link Text: This is optional. If you leave it empty, only the icon will show. If you enter text (e.g., "Mode"), it will appear next to the icon.

     Note: Static text like "Dark Mode" is discouraged because it won't change to "Light Mode" when toggled.

4. Add the CSS Class:
   • With the new Custom Link block selected, open the Settings sidebar (right-hand side).
   • Expand the Advanced section.
   • In the Additional CSS class(es) field, type listimia-dm-toggle.
5. Save Your Changes: Click Save in the top right corner.

Comparison: Normal Link vs. Dark Mode Toggle

Saving Your Menu

1. Click the Save button in the top-right corner.

2. Click Save again in the confirmation prompt.

✅ Important:
The navigation is part of a template part. Any changes you make here will automatically apply across your entire website.

📚 Learn More

For a deep dive into the WordPress Site Editor, templates, and blocks, check out the official WordPress Documentation Hub. Use the search box to jump directly to the information you're looking for.

Need Help? Please refer to our How to Get Support article for assistance.