Navik Menu - Horizontal

Published on 07/16/2021
Help Article Design
Erica Manning
Leiout Developer

This article will explain how to use the horizontal Navik menu in Leiout. There are quite a few steps so make sure you do them all! 


For the Navik menu to work, jQuery and Bootstrap are required, but are already included in Leiout. In the uploads folder, you need to upload the main Navik files, navik-all.css and 

Screen Shot 2021-07-16 at 12.23.50 PM.png

You also should upload the logo files and social SVG's. These should be named exactly as they are in the following HTML markup so that you don't have to change the markup.  (logo-dark.png, logo-white.png, etc.) You can also use font awesome icons instead for the social media icons as shown below in the HTML markup. Finally, go to the super tab in the settings of the admin section of Leiout and change the navigation type to builder. Now go to the navigation tab and click the cog in your navigation menu and enter the following markup into the wrapper.

Screen Shot 2021-07-16 at 12.33.36 PM.png

Then, make sure the menu tab contains the following: 

Next, go back to the navigation tab and click the cog and go to the variables tab. Make sure there is nothing written in any of the variables except for:

Main Nav ID | {NAV:id}, Content ID | {NAV:content_id}

Screen Shot 2021-07-16 at 1.20.49 PM.png

Finally, you can style the menu how you'd like! Like Bootstrap, Navik has classes you can give to different elements to style them. Use the links below: 

CSS Selectors - Navik 

Style Options - Navik


You can find an example of this Navik horizontal menu at this website!

Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design