0 %

Menu

There are so many options, animations, positions for main Menu so it makes countless layouts. You can see these layouts in our demos.

Below you can see some of the menu examples, and don’t forget that you can change colors, opacity, font size, paddings and almost anything you wish.

  • Logo – Primary logo
  • Logo 2 – Logo to use if hero holder or row has similar background color as Primary logo. You have to check the option in custom field below the editor and in the Row settings (if you’re using Visual Composer). Also, there is an option to change it by default.
  • Header style for entire site – top menu (Default), or lateral (Lateral Toggle Left, Lateral Toggle Flex or Lateral Left)
  • Default header align – Aligment of content in Default (top) menu
  • Lateral Toggle Left menu padding – padding for Lateral Toggle Left menu
  • Lateral Toggle Left toggle button (3 lines) vertical align – align of trigger button
  • Lateral Toggle Flex button vertical align – align of trigger button for this kind of menu
  • Lateral Toggle Flex menu padding – paddings for this kind of menu
  • Lateral Left menu vertical align – top or middle align
  • Lateral Left menu padding – paddings for this kind of menu (for all these menus, you can define custom top, left, right and bottom padding)
  • Default header layout – Layout of top menu (Logo, Menu, Widget, 3 lines combinations)
  • Extra header layout – Extra header is shown just above/below the default header. This is, basically, second row of Default menu where you can have almost the same layout and options like above.
  • Extra header menu position – Above or below Default menu
  • Extra header align – Left, center or right
  • Searchbar – Add search icon (magnifying glass) to the menu (to visible header menus)
  • Search and WooCommerce icons(if selected) position – These icons will be shown in the last widget area in the row, so you have to select layout where widget area is visible. You can put it in Default header or Extra header
  • Header Menu toggle – Header menu is shown if you click 3 lines (hamburger) menu icon
  • Compact Header on scroll – Header menu with smaller top and bottom padding on scroll
  • Compact header logo resize – option to decrease logo size if Compact menu is selected
  • Compact header top / bottom padding – Change (or not) top padding if Compact menu is selected
  • Overlay / 3 lines menu type  – Several types of 3 lines menu (different layout on toggle – overlay background color or image, right toggle, top toggle)
  • Background colors for overlay background colors menu –  Customize background colors of Overlay background colors menu. You have to insert comma separated color codes (one for each menu item)
  • Default header custom transparency and visibility – Customize layout of top menu on scroll. Sometimes is useful to change menu colors depending on the background of first section on the page.
  • Header overflow – Top menu overlays the content of the page or not.
  • Fixed header – Top menu is always visible (fixed on the top of the page) .
  • Scroll to top visible – Top menu is visible only when you scroll up the page.
  • Border visible – grid lines and border around header items
  • Default Header Fullwidth – stretch menu across the screen
  • Default header left and right padding – left and right padding of the Default menu
  • Default header top and bottom padding – insert top and bottom paddings separately
  • Extra header paddings – paddings for Extra header (if selected)
  • Header background color – obviously
  • Default Header Gradient Background – you can create gradient background with up to 4 colors
  • Header background color opacity  – Add opacity to header background color
  • Text color in header – main menu color
  • Text hover (and selected) color in menu – hover color and color of current page menu item
  • Default header font size, transform, font weight – customize style of menu elements (titles)
  • Header  background image  – choose background image and style it (cover, contain, tile, no repeat)
  • Defult header (menu and submenu) font options  – Font size, transform and weight for menu and submenu
  • Default header submenus color – There is light and dark color scheme for drop down submenus
  • Megamenu fullwidth – Define the width of Megamenu. Instructions on creating Megamenu you can find on separate page

I hope you understand that “countless layouts” is not just a phrase

Overlay Menu Settings

  • Overlay Menu text color, hover color, font size, font weight, transform,  line height – customize font style for overlay menu
  • Responsive settings Tablet  – same settings for viewing website on Tablet
  • devices
  • Responsive settings Phone– same settings for viewing website on Tablet devices
  • Overlay Widgets color, link color, link hover  – since you can insert widget in menu, here you can customize colors of that section of Overlay menu
  • Overlay menu background image, background color, background color opacity and style – background image and color mask and opacity of background image of Overlay menu. Also, you can choose how the image will show (contain, repeat, no repeat, cover)
  • Overlay menu background hover color – you can’t use this option for Overlay Background Image menu
  • Overlay menu Gradient Background – background color options with gradient of up to 4 colors
  • Overlay menu background color opacity – define transparency of background color
  • Overlay menu background color hover opacity – you can use this option only if background image is selected
  • WOW – define opening animation for all menu items and widgets
  • Responsive settings Tablet / Phone – Define font sizes for responsive layout

Mobile Menu (Responsive) Settings 

On mobile devices menu will be changed to classic mobile 3 lines (hamburger) drop down menu

  • Colors – text, overlay and background colors
  • Fonts – size, weight, style, spacing, height
  • Background – solid color, opacity, gradient, image (position, repeat, cover)
  • Logo – you can use default logo, or logo 2
  • Direction – mobile menu can slide from left to right, botom to top and vice verse, or fade in/out when you click on 3 lines icon