Setting up a custom navigation in Semplice is easy with our navigation layout presets. You can customize the presets for your site, including color, logo, menu items and the mobile overlay menu.
You have the option to then assign a custom navigation bar on a page-by-page or project-by-project basis in your page settings area.
Selecting your navigation preset
Semplice comes with several navigation layout presets to choose from.
First, go to "Customize" > "Navigation" and click "Add Navigation". Select your favorite navigation layout preset.
Note: Semplice Studio edition will have additional navigation layouts to choose from than Single license users. Single license users will need to upgrade to a Studio license to unlock additional layouts, such as the four-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. You can then set options such as the logo size or alignment.
Changing the logo size
To change the size of the logo, look for the 'Width' option in the Logo upload area. You can adjust this width to be responsive by using the Responsive icon to set a custom value for each device width.
Changing the navbar width
By default, you navigation bar items will be contained to the grid width that you have specified under "Customize" > "Grid". However, you can set the navigation bar to be fluid-width as well. You can then add horizontal padding to add spacing on each side of your navbar.
Changing the navbar height
In the same area where you can set the navbar width, you can also change the height. You can set the height on a device width basis by using the Responsive icon to add a custom value for each device width.
Hiding navigation on scroll
For a better user experience, some users may wish to have a sticky navigation bar hide while scrolling down, and then reveal back when scrolling up. For this under the "Navbar Styling" set "Hide navbar on scroll" to "Enable".
Note: If you have a container navigation that is positioned at the bottom this setting will be ignored.
Transparent while in cover
Some may wish to have the navbar background color be transparent while the navbar is overlaid on top of a fullscreen Cover section. You can enable this feature to do so. Keep in mind, this will not make the navigation bar transparent at all times, it will ONLY make it transparent while the Cover section is in view.
Adding menu items
Under the Menu tab in your navigation bar options, you can click "Edit Menu Items" to add links to your navbar. You have the option to link to a page, project, post or custom URL.
Note: you cannot set different menu items for each navigation bar. When editing the menu items of your navbar, the items will be edited for all of your navigation bars. If you need to set custom menu items for each page, you can use the Conditional Menu plugin to do so.
Styling the menu items
You can easily style your menu items in the "Menu" tab and change your menu item color, font size, letter-spacing and the spacing between menu items. You can also set hover effects under the "Mouseover" options area at the bottom.
Using a hamburger menu system
Some may wish to display the hamburger menu system instead of the standard navigation bar to trigger the "Overlay" menu (which is normally shown for mobile.) To do so, go to the "Menu" tab and under "Menu" options switch to the "Hamburger" under the "Type" option.
Styling the overlay menu
You can also custom style your overlay menu, which will display by default for mobile devices and screen sizes. Under the "Overlay/Mobile" tab you can set things such as the "Overlay" menu font styling, and adjust things such as color or paddings.
Styling the hamburger
Under the "Overlay/Menu" tab, under the "Hamburger" options area you can style things such as the hamburger color, width, thickness and paddings. You can also set the alignment of the hamburger here as well. In newer Semplice versions, you can even set your own custom hamburger. For best results, we recommend SVG.
Pro tips:
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. Look for the navigation symbol in the lower left to switch to any device width and make adjustments for that particular screen size.
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.
Note: if you are exporting from Adobe Illustrator to get your inline SVG, be sure to select "Style Attributes" in the CSS Properties under Advanced Options when exporting.