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 '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 stylings, 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.