If you're using the WoodMart Themes, the presentation of menus and headers on mobile can actually be set separately. This is critical to improving browsing efficiency and mobile access experience. Here's a detailed explanation of how to set up each step to ensure that your mobile menu is both clear and good-looking.

I. Create an exclusive mobile menu

First go to the menu management screen in the WordPress backend.

• Click [Appearance > Menu] in the left menu bar.
• Click on "Create new menu" at the top of the page.

• Name this menu, for example, "Mobile Menu".

• On the left, select the content you want to put into the menu, such as pages, categories, product links, etc., and click "Add to menu".

• Drag menu items to sort, set parent/child structure

• Save menu

Note that this menu is not bound by default to themobile, which also needs to be assigned manually.

II. Binding mobile menu positions

• Go to [Appearance > Theme Settings > Header > Mobile Menu

• Select the "Mobile Menu" you just created from the drop-down list.
• Save Settings

That way, when you tap the burger icon on your phone, you see what you just set up.

Using Header Builder to set up a mobile header structure

WoodMart provides a visual Header Builder that can be used individually for theMobile Design HeaderStructure.

• Go to [WoodMart > Header Builder] in the backend.

• Drag and drop modules to build your mobile header, generally recommended:
  • Logo on the left.
  • Leave the center empty or add a search icon
  • The right side holds the menu icons andcart

• There are three device icons at the top of the page: desktop, tablet and cell phone, click the "mobile" icon to switch to the mobile view.

• Clicking on each module allows you to set display conditions, such as whether it is enabled on mobile, whether sticky effects are enabled, etc.

• Click "Save" and refresh the site to see the results.

Fourth, customize the menu to expand the style

WoodMart supports optimization of mobile menu expansion styles, such as expansion direction, icon styles, animations, and so on.

• Go to [WoodMart > Header Builder].
• edit a module

• You can turn on or off the shopping cart icon, the searchicon (computing)Switches, account entries, etc.

• Set the font, background color, hover state and other styles of the menu items on the style page
• If you need to add the menuicon (computing)If you want to add CSS classes to each menu item, you can write a little style to match the display icon

V. Make the menu appear only on mobile devices

WoodMart will automatically determine the device width to enable the mobile menu. However, you can also manually set which elements are displayed only on mobile:

• In the editor, you can open the "Responsive" settings and check the "Mobile only" box.

• Similarly, certain content that is only suitable for desktop display can be set to be visible only on the desktop

This avoids stacking or duplication of elements and improves access clarity.

Sixth, the menu style wrong or invalid solution

If you find that menu clicks don't work, styles run off or obscure the page, we recommend trying the following:

• clear the cache(Theme Cache, Plugin Cache, Browser Cache all cleared)
• Check if plug-ins are installed that affect the menu structure, such as third-party menu enhancement plug-ins or multi-language plug-ins
• Check to see if CDN is turned on and try to temporarily disable test style loading
• Use your browser's "Inspect Element" to see if there are any style conflicts, with a focus on .mobile-nav,.mobile-menu,.hamburger-icon isomorphism

Advanced Play: Using Elementor to Customize the Mobile Menu Area

If you use Elementor Pro, it is also possible to completely customize a mobile menu area.

• Create an Elementor template with type "Section".

• Insert images, buttons, navigation menu components, free layout

• Embed templates via Shortcode into custom blocks in Header Builder
• utilizationresponsiveSetting to hide desktop display and show this template only on mobile

This approach is suitable for sites with high style requirements, such as branded official websites and e-commerce brands.

summarize

WoodMart is actually very flexible in terms of mobile menus and navigation, with the built-in Header Builder, menu system and with Elementor for independent design. It is recommended that you set up a separateMobile MenuInstead of "inheriting the desktop menu", this allows for cleaner access and more focused functionality on the phone.

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: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off