Setting up a custom navigation in Semplice is easy with our navigation layout pre-sets. You can customize the presets for your site, including color, logo, menu items and the mobile overlay menu.
Selecting your navigation preset
First, go to Customize > Navigation and click 'Add Navigation'. Select your favorite navigation preset.
Note: Semplice Studio edition offers additional navigation presets, including 4-corner navigation.
Adding your logo
You can use a text logo or upload your own logo. If you upload your own logo, use a PNG or SVG vector file format. SVG format will be the best quality.
Styling the menu items
You can easily style your menu items and change your color, font size, letter-spacing and the spacing between menu items. You can also set hover effects.
Styling the overlay menu
You can also custom style your overlay menu, which will display by default for mobile devices and screen sizes.
Changing the background preview color while editing
In the editor popup under 'Preview Background Color", you can preview your nav on the background color of your choice. This helps you see how it will look on your site.
Editing your navigation for mobile breakpoints
To control how your your navigation displays on different screen sizes, you can set custom values for certain device widths. Just look for the small responsive icon next to each input value.
Using the hamburger menu and overlay on desktop
Go to 'Type" in the editor popup and select Hamburger to display the hamburger menu and overlay for desktop.
Changing your logo with CSS or JS
To change your logo with CSS or JS, upload your logo as inline SVG. In the editor popup, click SVG Code under the image options and paste in the raw SVG code. To use an animated JSON logo for your site, follow this guide.