View Categories

Primary Menu

Primary Menu

Go to Customize > Header > Primary Menu.

The primary menu, also known as the main menu, acts as a navigation area of your website. It typically appears at the top of the site’s header and allows visitors to easily navigate to key pages on your website, such as Home, About, Services, Blog, and Contact.

Within the Responsive theme, the Primary Menu element is fully customizable to fit your site’s design and branding. You can add, remove, or reorder menu items, as well as link external pages. It can also be used as a dropdown menu to effectively create one main category for multiple pages.

Here are some setting options that you get in the primary menu:

Main Menu Settings

Main Menu Settings

  • Disable Main Menu: A toggle switch to turn the main menu on or off.
  • Menu Item Hover Style: You have four options (None, Underline, Zoom In, and Overline) to select the type of style you want when a user hovers over a menu item. The current selection is “Underline.”
  • Last Item in Menu: With this, you can set the last item in your menu bar. The current selection is “None.”
Mobile Menu Settings

Mobile Menu Settings

  • Enable Mobile Menu: Option to enable the menu on mobile.
  • Stack Mobile Menu: Your menu will be displayed as a hamburger menu on mobile
  • Breakpoint: An input field to define the screen width at which the mobile menu will be displayed.
  • Mobile Menu Label: A text input field for a custom label for the mobile menu.
  • Menu Label Font Size: Option to adjust the font size of the mobile menu label.
  • Hamburger Menu padding (px): Set the top, right, bottom, and left padding for the hamburger menu icon.
  • Mobile Menu Style: A dropdown menu to choose the style of the mobile menu.
  • Mobile Menu Toggle Style: A dropdown menu to choose the style of the button that toggles the mobile menu.
  • Mobile Menu Button Radius (px): Adjust the corner radius of the mobile menu button.
  • Font: A link or button to access font settings, indicated by a pencil icon.
Main and Mobile Menu Colors

Main and Mobile Menu Colors

  • Background Color: A color picker for the main menu background.
  • Active Menu Background Color: A color picker for the background of the currently active menu item.
  • Hover Menu Background Color: For the background of a menu item when hovered over.
  • Menu Item Link Color: Add text color to menu item links.
  • Active Menu Item Link Color: Add text color of the active menu item link.
  • Menu Item Link Hover Color: Text color of a menu item link when hovered over.
  • Mobile Menu Background Color: For the mobile menu’s background.
  • Menu Toggle Background Color: A color picker for the background of the menu toggle button.
  • Menu Toggle Color: A color picker for the color of the menu toggle icon or text.
Sub Menu Settings and sub menu colors

Sub Menu Settings

  • Container Border: Options to set the top, right, bottom, and left border width for the sub-menu container.
  • Container Top Offset: An input field to adjust the vertical position of the sub-menu container.
  • Item Divider: A toggle switch to create a divider between sub-menu items. It is currently off.

Sub Menu Colors

  • Container Border Color: For the sub-menu container’s border.
  • Divider Color: For the color of the item divider.
  • Sub Menu Background Color: Add color to the sub-menu’s background.
  • Active Sub Menu Background Color: A color picker for the background of the currently active sub-menu item.
  • Hover Sub Menu Background Color: Active color for the background of a sub-menu item when hovered over.
  • Sub Menu Item Link Color: Active color for the text color of sub-menu item links.
  • Active Sub Menu Item Link Color: A color picker for the text color of the active sub-menu item link.
  • Sub Menu Item Link Hover Color: A color picker for the text color of a sub-menu item link when hovered over.

Updated on August 18, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad

🎉 Use code EXTRA20 to get 20% Off!

Claim 20% Off