The Porto Menu Element allows you to add fully customizable navigation menus anywhere on your site — such as in headers, footers, sidebar or custom page layouts — while maintaining design consistency with your overall Porto theme styling.
With this element, you can control every aspect of your menu’s appearance, from typography and spacing to dropdown styling and popup menu options. It’s an essential tool for creating a navigation system that matches your brand’s look and feel.
How to Use the Porto Menu Element
- Add a New Element
Create or select the Column or Section where you want to insert your navigation menu.
Click “Add New Element” inside the page builder interface. - Select the Porto Menu Element
From the element list, locate and select “Porto Menu”.
This will add a customizable menu block to your layout. - Configure Your Menu Settings
Once added, configure the menu using the available options in the sidebar panel.
Key options include:- Location: Choose which WordPress menu location to display (e.g., Main Menu, Secondary Menu, Top Navigation).
- Menu Typography: Adjust font family, size, weight, and letter spacing for menu items.
- Menu Color System: Set the Link Color, Background Color and color in sticky header when normal and hover status.
- Item Spacing: Set horizontal and vertical spacing between items for better visual balance.
- Dropdown Menu: Configure dropdown typography, padding, and background color.
- Menu Popup (if applicable): Customize typography, alignment, and spacing of menu popup which appears when you hover on top level menu items.
- Position in Header or Layout
Drag or place the Porto Menu Element into your desired header row, sidebar, or custom template area.
For dynamic headers (created via Porto → Template Builder → Header), the element will automatically inherit the header’s layout behavior. - Save and Preview
After completing your configuration, click Save Changes and Update/Publish the page or template.
Then preview your site to verify the menu displays as intended and behaves correctly across devices.
Additional Tips
- You can manage and assign menu locations in Appearance → Menus → Manage Locations.
- To create different menu styles for different sections (e.g., a dark footer vs. a light header), duplicate the Porto Menu Element and apply distinct skins.
- Combine the Porto Menu Element with Sticky Header or Mega Menu features for advanced navigation layouts.
- For multilingual sites (using WPML or Polylang), assign language-specific menus in the corresponding language settings.
The Porto Menu Element provides a flexible and design-driven approach to managing navigation across your site. Whether you’re building a minimal header, a mega menu, or a sidebar layout, this element ensures complete visual control and responsive functionality — all without writing custom CSS.
