A complete tutorial on creating multi-level drop-down menu navigation with WoodMart

Want to make your website navigation look more professional and categorized?WoodMart ThemesBuilt-in powerful menu management features that support the creation of multi-levelpull-down menuIt is suitable for e-commerce station, brand official website or content-based platform. Just need simple configuration, you can realize the similar kind of "hover that is to expand" multi-level navigation effect.

I. Prerequisites

Before you start, make sure the site meets the following conditions:

• WordPress installed and working
• WoodMart theme enabled (latest version recommended)
• WoodMart Core Plugin installed and activated (installation will be prompted automatically)

II. Creating the menu structure

The steps are as follows:

• Go to the backend, click Appearance > Menu

• Create a new menu and name it (e.g. Main Menu)

• Check the page, category or custom link on the left and click "Add to menu".

• Drag and drop menu items to set the hierarchy:
  • First level menu is displayed directly in the navigation bar
  • Drag secondary or tertiary menu items slightly to the right to form a nested structure

Example:

Mall (Level 1)
├── Men's Clothing (Level 2)
│ ├── T-shirts (Level 3)
│ └─ Jacket (Level 3)
├─ Women's Clothing
└─ Accessories

• Check the box "Make this menu the main menu".

• Click Save

Enabling WoodMart drop-down menu styles

WoodMart Provide a variety of menu layout methods , you can make the multi-level menu more beautiful and orderly .

Setting method:

• Click on one of the menu component
• You can set it in the pop-up settings window:
• Dropdown type incorporate Default,Full Width et al. (and other authors)

IV. Adding icons or labels to menu items (optional)

To make the menu more eye-catching, you can add icons or text logos to certain menu items.

Operational Steps:

• On the menu editing screen, click the drop-down arrow to the right of each menu item
• Fillable:
  • Custom CSS class (for adding icons)
  • Description (subtitle can be displayed)

• If you don't see these fields, click on "Show Options" in the upper right corner of the page and check all the visible attributes

Together with Font Awesome or WoodMart's own icons, you can display logos such as "Hot" and "New".

V. Mobile optimization recommendations

• WoodMart comes withResponsive MenuThe auto-collapse to burger button
• If necessary, a separate program formobileMenu to create a cleaner version

VI. Common problems and solutions

concern	cure
Menu does not show multi-level structure	Check if there is an error dragging, or if the dropdown is not enabled Menu Style
Submenu cannot be clicked	Check for script conflicts, try turning off some of the Plugin Testing
Icon not displayed	Check that the icon class names are correct and make sure that the Font Awesome
Mega Menu Content Disorder	Check that the number of columns is not set too high, or that incompatibility is used widgets

concluding remarks

Creating multi-level dropdown menus with WoodMart helps visitors find their target page quickly, increasing browsing efficiency and conversion rates. It is recommended that beginners start withBasic MenuStart with Mega Menu, and then gradually explore advanced features such as Mega Menu. If you want to create a full-featured, clearly structured and mobile-friendly website navigation, the tools provided by WoodMart are powerful enough.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off