Navik Menu - Overlay

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

This article will explain how to use the overlay 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

Next, you need to create a navik.scss file in the SASS files section if there's not already one created. Copy the code below. You can change the link of the $overlay_url to the image you want in the background of your overlay menu. Also, uncomment out the 'display: none' on line 5. 


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

Item LI {ITEM:li_class}, Brand Text | {BRAND:text}

Screen Shot 2021-07-16 at 12.45.15 PM.png
Screen Shot 2021-07-16 at 12.45.09 PM.png

Then, make sure the menu tab contains the following: 

Finally, add the following code to the initialize file. This function is called when the page is loaded so that the Navik menu will fade in once it loads. We use this so that it doesn't show the unstyled menu prior to it loading. 


You can find an example of this Navik overlay menu at Trolley Web's 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