1. Home
  2. Docs
  3. Happy Theme Builder
  4. Theme Building Widgets
  5. Nav Menu

Nav Menu

How to Use Nav Menu Widget

Drag and Drop the HappyAddons Nav Menu widget to the Elementor Editing Panel. 

1G1iwkjSHe6DQCWs nBzx5Oi Qa Qy6pY5 nEFoZGg8m 0t7xQYojuR5emm 1oz qy 9k vhfRvSsK2z ajQ

With the HappyAddons Theme Builder, You can customize your site navbar. From the content editor, select a menu. 

You can set the alignment of the Nav bar for both desktop and responsive devices. You can also set menu icons as well as icons for opening and closing. 

0OAeBfOFZlfNzFbYytx8vmOGv9sFt50Uhpd

Style: 

On the style tab, You will be able to set both Horizontal and vertical padding. You can also change the Space between two Nav menu Items. 

You can set the Nav menu hover effect as Underline or Overline. 

To reorganize the typography of any site, You will need typography control. In this Theme Builder of HappyAddons, you will find the Typography settings for almost every widget. You will find the Typography settings as well as the Color and Background settings.

Nav Menu Active style: 

You will be able to set the text color and background color for the Active Nav Item. 

4emxocrrJ8rHryA61XX2dT3DqOzZo plPNVCiQ mj6zjR27VyItbDQgI2077m FNL 7kQjZ7TMny1aVZYTL8UipIzQi8e3DHQ8RvWBt

Nav Menu Hover style: 

You will be able to set the text color and background color for the Hover Nav Item.

FLgauw5Ta8Va0eeLUliDMYAomG aca1zR8z8WflzhCxBZE4UKzln9 57ZePF3rKbLQ1irV j44 yqXZit 6bUFx8Zn5ZgFPIIqMLK4hk7vhBZYO3CYBOTEJ BxVxqsjwqDRS4vAv5K5AnoXDOV4lLAEKKBe vfSnPA6PzYMrHRsAD3t41Yh82jGReBR4Dg

The below-mentioned screenshots will clear any confusion (if any)

Dropdown Menu Style: 

You can customize the Dropdown menu style for both the Normal and Hover function. You can change the color, Background, Typography, Box shadow, Border Type with its radius, and Border width. 

Along with that, you can set the Top Distance of the dropdown items. 

nF6S2O0Gl3jzVFwy3DYXsj16wIAUM0e69f0nHf29vkZ qDt4DEG74m9v7a48ZJEQEFRucduD FyTFMamGAgtDXEeAAFlqyBjA5 XLJLyAxbvXpXATeSCDZN39YsZzLPA7mP6kxtc y3UWTjT nZE0iW5UQ8YdY6jKDuRvyF3CAFjIvAK7HRUoZGRHnnMjg

Responsive Navigation: 

You can customize the nav menu for responsive devices. You can set the background color, Icon size, Icon Color, and Icon Border. You can set a border for the Hamburger and Closing icon. 

Besides, you can define the menu item separator color.

bbFRY2zKc3fm1djHLQ Tull0Jx8MQCycENL1WVbQgn9rdGCxpaeNS4ljIoRzPscWjub7K0q V2SlSlurI7hHFBkdkh11Ot1d xfgwG dRGLBJgXnDW1WJTQTA4I 41mRxpbQBiog4n1 5Oy9pMO39ECov6dMBti4 N810J3TFJMbk A3KtiG5DDm8aSIsA
Was this article helpful to you? Yes No

How can we help?