Close

Search

Account

Documentation

Forum

Menu

Next
Prev
close
  1. Home
  2. Jeg Elementor Kit

JKIT NAV-MENU

JKIT-NAV MENU makes it easy for you to create main menus such as HOME, OUR MENU,
This time we will give you a tutorial using JKIT Nav Menu, as follows

The guide is separated into the sections below. Click on it to navigate to the designated section.

  1. Activate JKit Button (#)
  2. Adding JKit-Nav Menu to Page (#)
  3. Content Setting (#)
  4. Style Setting (#)

 

Activate JKIT -NAV MENU

Before starting, please make sure the JKit button is already activated on Jeg Elementor Kit Dashboard ➞Elements

Adding JKIT NAV-MENU To The Page

to add a JKit button to your page you can open Elementor on your page after Elementor opened you can drag out the JkIT – Nav Menu

 

 

Content Setting 

There are several options included in the Jkit Nav Menu content setting that you can adjust according to your need

  1. Menu
    to select an existing setting
  2. Display Direction
    Choose to play vertical or horizontal menus
  3. Alignment
    to select the main menu to be buttoned, centered, or left
  4. Sub Menu Position
    select the sub menu position
  5. Extra Sub Menu Position
    select the extra sub menu position
  6. Responsive Break Point
    Choose when Responsive will activate

  1. Mobile Menu Logo
    choosing a logo when mobile responsive active
  2. Image Size
    to select the size of the image
  3. Menu Link
    To add a URL to the Main Menu

  1. Mobile Menu Icon
    to select the mobile main menu icon
  2. Mobile Close Icon
    Select the Mobile Menu icon when you want to close the mobile menu
  3. Sub Menu Click  On The Text
    To add a sub

Style Setting 

You can adjust the style of the button as you like, JKit Nav Menu style settings are separated into several groups. Click on it to navigate to the designated group

    1. Menu Wrapper (#)
    2.  Menu Item Style (#)
    3. Sub Menu Item Style (#)
    4. Sub Menu Panel Style (#)
    5. Hamburger Menu Style (#)
    6. Mobile Menu Logo (#)
    7. CSS BOX (#)

  1. Menu Height
    selecting the high main menu
  2. Background Type
    Change the link to redirect when the button clicked
  3. Mobile Background Color
    Choosing a background color from the Main Menu
  4. Padding
    Choosing a padding size to make the main menu neater
  5. Margin
    Choosing a padding size to make the main menu neater to the center
  6. Border Radius
    tidy up the edges of the border

 

  1. Menu Item Typography
    Choosing a font type
  2. Menu  Item Icon Size
    Change the link to redirect when the button is clicked
  3. Padding
    Choosing a padding size to make the main menu neater
  4. Margin
    Choosing a padding size to make the main menu neater to the center
  5. Normal
      • Item Text Normal Color
        Choose a Text Color
      • Background Type
        choosing a background color
      • Border Type
        Choosing the type of body you want
  6. Hover
      • Transition Duration
        Setting the Transition Speed
      • Item Text Hover Background
        Setting the Transition Speed
      • Border Type
        Choosing the type of body when Hover active
  7. Active
      • Transition Duration
        add color on the front page when the menu page is pressed
      • Item Text Active Background
        add color after the button is used
      • Border Type
        add a border after the button is used

 

  1. Indicator Item
    choose the indicator icon
  2. Indicator Color
    choose the color of the icon indicator
  3. Indicator Margin
    set the spacing between icon and menu
  4. Indicator Padding
    layout between icons and menus
  5. Indicator Border Radius
    tidy up the edges of the border

    1. Border Type
      select the border type
    2. Width
      To thicken, thin the border
    3. Color
      choose a border color
    4. Sub Menu Item Typography
      to select the sub menu font type
    5. Sub Menu Item Icon Size
      to determine the size of the sub menu icon
    6. Sub Menu Item Border Radius
      smoothed the sub menu borders
    7. Speacing
      to expand the sub menu
    8. Normal
      • Item Text Normal Color
        choose the color of the sub menu text
      • Item Text Active Background
        add background in sub menu
      • Items Border
        add Border in sub menu
      • Border Type
        add Border in sub menu
      • Border Radius
        beautify the top border
      • Border Type
        add Border in sub menu
      • Border Radius
        beautify the bottom border
  1. Hover
    • Transition Duration
      set the transition speed
    • Item Text Hover Color
      choose a transition color
    • Items Border
      add Border in sub menu
    • Background Color
      adding backgrounds
    • Border Type
      add a border in the transition
  2. Active
    • Item Text Active Color
      choose an active color
    • background Type
      Choose an active background
    • Border Type
      add a border

 

  1. Margin
    set the spacing of sub menus
  2. Padding
    increase the size of sub menus
  3. Border Type
    choose borders
  4. Background Type
    choose the background sub-menu
  5. Border Radius
    set all angles with a certain value
  6. Container Width
    set the length of the sub menu with a certain value
  7. Box Shadow
    set the shadow of the sub menu box

 

  1. Position
    set the layout of the hamburger icon
  2. Width
    set the width with a certain Value
  3. Icon Size
    set the size of the hamburger icon
  4. Normal
    • Background Type
      set the background on the hamburger icon
    • Border Type
      choose a border type
    • Icon Border Radius
      set all angles with a certain value
    • Icon Color
      change the icon color
    • Margin
      Adjust the position of the icon to make it tidier
    • Padding
      give free space
    • Width close icon
      set the width of the close icon
    • Icons Size close icon
      set the size of the close icon
  5. Hover
    • Background Type
      set the background
    • Border Type
      choose a border type
    • Icon Hover Border Radius
      set all angles with a certain value
    • Icon Hover Color
      change the icon hover color
    • Margin
      Adjust the position of the icon hover to make it tidier
    • Padding
      give free space
    • Width close icon
      set the width of the close icon
    • Icons Size close icon
      set the size of the close icon
  6. Normal close Icon
    • Background Type
      set the background on the close icon
    • Border Type
      choose a border type
    • Icon Border Radius
      set all angles with a certain value
    • Close Color
      change the icon color
    • Margin
      Adjust the position of the icon to make it tidier
    • Padding
      give free space
    • Width
      set the width of the close icon
    • Icons Size
      set the size of the close icon

 

  1. MAx Width
    used to provide a maximum width limit
  2. Width
    set the width of the logo icon
  3. Height
    adjust the height according to your needs
  4. Object Fit
    Select the size of the image according to the container
  5. Margin
    Adjust the position of the icon to make it tidier
  6. Padding
    give free space

 

Css Box

You can additional CSS on this box

 

Created in Denpasar, Bali by Jegtheme. 2025