Nav Bar

Nav Bar

Welcome to the “Footer” documentation. Looking to integrate a nav bar into your website? Our widget enhances user experience by providing an intuitive and visually appealing way to explore your content. In this guide, we'll show you how to use the editor to customize your nav bar widget.

Step 1 : Open The Editor
Step2 :  Customize The Content
Step 3 : Configure Settings
Step 4 : Choose Colors
Step 5 : Preview


Step 1: Open the Editor
1. Go to Nav Bar template.
 2. Click on "Edit" after choosing your template.




Step 2: customize the content

In this panel, you will edit each element of the navbar, including the logo, menu, and buttons.
1. Start with the menu, where you can easily add, remove, or rearrange items as needed





  • Customize each menu item by entering its label and selecting an icon.  
  • If the item is a link, insert the URL.    




  •  For dropdowns, add submenu items. For each submenu item, enter its label, choose an icon, and insert its link. 





    • 2. Upload your logo, input the link redirecting to your website, and specify its width.





    3. Finally, you can add, remove, or rearrange items as needed.





  • Personalize each button by adding its label, inserting the link, and selecting an icon. 
  • Additionally, adjust the style and choose the background style. 






    • Step 3: Configure settings

    Here, you'll handle the settings:
    1. Start by selecting the scroll behavior for your navbar. Then, fine-tune its width and padding.




    2. Proceed to configure the menu by choosing its position in the navbar and adjusting the gap between items. You also have the option to add padding, set the dropdown width, and specify the screen size for hiding menu items in responsive mode.





    3. Customize the menu items by selecting the hover style, adjusting the icon position, and setting the text size.





    4. Within the submenu, adjust the gap between items and choose how to display them either onclick or onhover. You can also customize the hover style of the submenu items, set the icon position, and adjust the text size.





    5. Finally, fine-tune the roundness of the buttons, select the icon position, and choose whether to open the link in a new tab.






    Step 4: Choose Colors

    1. Within this panel, you can select colors that match your website's design.





    Step 5: Preview

    Lastly, you can click on “Preview” to see how your nav bar widget looks on both desktop and mobile devices. After this, you can proceed to the next step.


    Related Articles:
    Mini Blog Footer