Listimia theme comes with a pre-built Navigation pattern to get you started immediately. Instead of building from scratch, you can simply edit, duplicate, or rearrange the placeholders we've provided.
Accessing the Navigation Editor
Go to Appearance → Editor.
In the left sidebar, click Patterns.
Click the Header tab.
Select the Main Navigation pattern.
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
Click the + icon at the bottom of the menu.
Select Page.
Choose a page from your site.
The page will be added to your menu automatically.
Adding a Custom Link
Click the + icon.
Select Custom link.
Enter the URL (example:
https://yoursite.com/contact).Enter the link text (example:
Contact).Press Enter.
Reordering Menu Items
You can easily change the order of menu items:
Hover over a menu item.
Grab the handle (⋮⋮) on the left.
Drag it up or down.
Release to drop it in the new position.
Creating Dropdown Submenus
Use dropdowns to organize related links.
How to create a submenu:
Click the menu item that should contain the dropdown (example: Dropdown).
In the toolbar, click the three dots menu (⋮).
Select Add submenu.
Click the + icon that appears under the parent item.
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”?
Add or select a menu item.
In the right sidebar, scroll to the Advanced section.
Expand Advanced.
-
In Additional CSS class(es), enter one of the following:
is-style-outline→ Outlined button styleis-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:
- Open the Site Editor: Navigate to Appearance > Editor and select the template where your navigation menu is located (usually the Header).
- Add a Custom Link: Click the (+) icon within your Navigation block to add a new menu item and select Custom Link.
-
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.
-
URL: Set this to
-
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.
- Save Your Changes: Click Save in the top right corner.
💡 Pro Tip: Hide Text for a Cleaner Look
If you want to show only the dark mode icon without the text label, you can add an additional class:
hide-text. Your classes should then look like this:listimia-dm-toggle hide-text.
Comparison: Normal Link vs. Dark Mode Toggle
| Feature | Regular Link | Dark Mode Toggle |
|---|---|---|
| URL | Any page URL | # |
| CSS Class | (Optional) | listimia-dm-toggle |
| Behavior | Navigates to a page | Switches site theme |
Saving Your Menu
Click the Save button in the top-right corner.
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.