How to change navigation links style
In this tutorial you will learn on how to change the style of navigation links.
This will be different for desktop and for mobile.
All navigation links are in fact buttons, but usually they have no style or minimal style.
Step 1 - open editor
Open the "Navigation Settings" editor.
Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element you want to customize.
In the "Navigation Settings" editor, there are two customization categories: "General" and "Look & Feel".
The settings we are interested in are located under the "Look & Feel" tab.
Step 2 - change style
In the "Navigation Settings" menu, you will see the following options:
1. "Choose Dropdown Button Style" . Click this dropdown to change the appearance of the links within the dropdown menu (e.g., text style, button design).
2. "Choose Dropdown Box Style". Use this option to customize the overall style of the dropdown box, including background, borders, or shadows.
Change main navigation links style
To change the style of the main navigation buttons, click on the "Choose Button Style" dropdown.
In this dropdown, you have all the predefined styles in "Website Look & Feel -> Buttons"
If you want to edit an existing style or create your own style, click on the "Edit Style" button which will open the "Website Look & Feel -> Buttons" sidebar.
We recommend using a distinct style for these links to ensure clear visual hierarchy and usability. All our templates come with a separate default style for dropdown links, which can be modified to match your preferences.
Change secondary links style
To change the style of the buttons inside the navigation dropdown (secondary links), click on the "Choose Dropdown Button Style" dropdown.
In this dropdown, you have all the predefined styles in "Website Look & Feel -> Buttons"
If you want to edit an existing style or create your own style, click on the "Edit Style" button which will open the "Website Look & Feel -> Buttons" sidebar.
Change dropdown box style
To change the style of the dropdown box itself, click on the "Choose Dropdown Box Style" dropdown.
In this dropdown, you have all the predefined styles in "Website Look & Feel -> Box Styles"
If you want to edit an existing style or create your own style, click on the "Edit Style" button which will open the "Website Look & Feel -> Box Style" sidebar.
Note: To preview the changes you’ve made, switch to Preview Mode.Mobile considerations
On mobile devices, the Dropdown Box Style determines the appearance of the hamburger menu and the navigation menu as a whole.
Ensure it is user-friendly, visually appealing, and matches your site’s design.
We also recommend using the same style for main and dropdown links or only minimal differences (e.g., slightly smaller font size for dropdown links). This maintains a clean and cohesive look across your navigation.
Related Articles
How to change the order of links in navigation
In this guide, you will learn how to rearrange the navigation links on your website. Step 1 - open editor Open the "Navigation Settings" editor. Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element you want to ...How to rename a navigation link
In this tutorial you will learn how to rename a link in the navigation element. Step 1 - open editor Open the "Navigation Settings" editor. Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element you want to customize. ...How to delete a navigation link
In this tutorial you will learn how to delete a link in the navigation element. Step 1 - open editor Open the "Navigation Settings" editor. Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element you want to customize. ...How to create a dropdown in navigation
In this guide, you will learn how to create a dropdown menu in your website’s navigation. Step 1 - open editor Open the "Navigation Settings" editor. Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element you want to ...How to edit navigation link target
In this guide, you will learn how to edit a navigation link target in your website’s navigation menu. Step 1 - open editor Open the "Navigation Settings" editor. Click "Edit Navigation" on the hover menu or double-click on the "Navigation" element ...