- Knowledge Base
- Responsive Website Builder
- Navigation and Sub-Navigation Menus
- Duda Support > Responsive Website Builder > Editing a Site
Well-structured navigation will guide your site visitors and help them quickly locate the information they are looking for. Generate an all-inclusive navigation menu with links to all pages on the site, or build you own menu with only most useful links.
Building the menu
Add the Navigation links widget to the site and pick one of the options for populating the list of links.
- Site page - Populate the content of the navigation links with site pages, navigation folders and anchors. This menu will be generated automatically based on site Pages tab. This is a quick way to place basic navigation on your site.
- Custom links - Build your own menu with custom links. This option allows great flexibility in creating quick navigation bars to add inner page navigation, footer navigation with only most useful links, social accounts menu and more.
After you pick the Custom links option, the editor will prompt you to populate the list of links with custom elements, similar to how you would work with link picker. Just add items and link them to external or internal pages and anchors.
Styling the menu
Edit the navigation's design by right-clicking on the navigation and selecting Edit Design.
The Layout section lets you easily switch between one of the several designs for the navigation bar. Keep in mind you can modify the design of any of these layouts, so just pick one which looks similar to the design you want, and then see the later sections of this article for customizing the look even further.
To use the navigation capabilities (either published or unpublished), users will need to actively change a layout. The new navigation uses different CSS selectors so switching the layout will reset the navigation customization and allow the user to customize it again. Clicking undo will bring back the old navigation.
If your site contains subpages, then you will also have access to a Sub Navigation Layout section. From here you can select a layout for how the subpages on your site will appear. Just like the main navigation layout, you can also modify the sub navigation layout in later sections.
Split navigation / Center logo
If you want to place your site's logo in between your navigation items without having to create two separate sets of navigations, you can do it by checking the "Add centre logo" box.
It will break the navigation links to two, aligning them equally from both sides of the logo. The center logo feature takes into account the number of navigation items, So if you will keep adding pages, the navigation items will be organized automatically.
In case there is is an odd number of navigation items, the right side will contain more items (no option to change it).
From the Pages tab, you can customize:
- The style of individual navigation bars (background color, hover color, and spacing, as well as text style)
- The direction of the navigation (Left-To-Right or Right-To-Left)
- The number of visible navigation items
- The type of divider you want between your navigation pages if you want a divider.
Quick Navigation - Quick navigation allows the user navigate through pages without refreshing the entire page. Load times are faster which is appealing.
Important Note: When the Quick Navigation option is enabled the header and footer will not be reloaded when you switch between pages.
You must keep this option disabled if you are using custom code in the header that is not shared by all pages on the site.
If you click on "Link Text" you can adjust options for
- Font Type
- Font Size
- Text Color
- Option for underline, bold and italic
Selected Page & Hover
At the bottom of the pages section, you can customize the style of the selected navigation and the hover effects for the navigation. Select from the many "hover" effects to add additional uniqueness to your site.
You can also modify the color of the navigation item when you hover over it, as well as the bold, underline and italics from the "link text" options.
From the Subpages tab, you can customize the sub navigation style
- Background color
- Spacing between sub navigation
- Divider style
- Selected page background color
If you go into the "link text" options for subpages you can also specify how the sub pages appear. Specifically:
- Font Style
- Font Size
- Text Color
- Bold, Underline and Italics
- Text Direction for right to left or left to right
- Selected page text color
- Selected page Bold, Underline and Italics
From the Spacing tab, you can customize the spacing of the navigation bar.
- To learn how to add this widget to your page, check out our guide on Adding Widgets.
- To learn more about editing widgets, check out our guide on Editing Widgets.
- To learn more about editing widget design and style, check out our guide on Widget Design.
- To learn more about editing spacing, check out our guide on Spacing.