Complete setup of WoodMart header layout and navigation menu

WoodMart ThemesA very flexible header design system for e-commerce websites, whether you want a minimalist navigation, logo centered, top pass-through, or a complex layout with a search box and shopping cart integration, it delivers. If you've just installed WoodMart or want to restructure the top of your site, this tutorial will take you step-by-step through setting up a header layout, complete with customizations!navigation menuThe configuration of the

I. Where is the head layout entrance?

Once you are in the WordPress backend, click in order:

WoodMart > Header Builder

in thisVisualization EditorIn the interface, you will see that the entire head structure is divided into zones:

• Top Bar
• Header Main
• Header Bottom

Components can be added to each area, such as Logos, menus, search boxes, and buttons,icon (computing)etc.

II. Setting up logos and banners

Click on the logo module, a settings panel will pop up on the left:

• Upload Main Logo Image
• Optional Retina HD upload
• Set Logo Width, Margins
• Possibility to set the text "Slogan under Logo" (e.g. brand slogan)

The logo is the first visible area of every page, and it is recommended to use transparent PNG format to avoid background conflicts.

Third, add and customize the navigation menu

menuIt is the most critical functional part of the header, and the setup path is as follows:

Go to the WordPress backend:

Appearance > Menu

• Create a new menu with the name "Main Menu".

• Adding pages, categories, links and other items to the menu

• Drag to adjust the order, can be set up multi-level drop-downs

• Check the "Show location" box at the bottom of the page. Main Menu

Return to Header Builder and drag the "Menu Component" into the Header Main area to display the menu on the page.

IV. Mobile menu settings

WoodMart supports individual settingsmobileHeader structure, perfect for displaying a cleaner menu when accessed by mobile visitors.

go into Theme Settings > Header Builder > Mobile Header

You can set it up:

• Whether to display the mobile menu button (hamburger icon)
• Moving the contents of the expanded menu (menu items, icons, search, etc.)
• Logo centered or left-justified
• Hide or show other elements (e.g. shopping cart, language switching, etc.)

It is recommended that mobile simplicity is the main focus and avoid stacking too much content.

V. Multiple header layout support (optional)

WoodMart also supports using different headers for different pages, for example:

• Home page uses a white header on a white background
• Product detail page useopen (non-secretive)head
• Activity page navigation using special icons

summarize

WoodMart s header system is flexible enough to quickly build a navigation area that fits your brand's positioning without coding. With Header Builder's modular approach, you can freely combine components such as Logo, Menu, Search Bar, Shopping Cart, Language Switcher, etc., optimized for desktop and mobile respectively. Combine WordPress With its own menu management system, the navigation structure can also be easily maintained.

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