Themes Options

9.2. Theme Options

QuadMenu allows you to use more than one theme. Each theme is an instance of options that allows you to change the menu layout and style options.

QuadMenu > Panel > Your Theme

In the main tab you can control the display options, related to how the menu and its elements will show on desktop and mobile devices.

Menu: Here you can customize the style of your menu, with parameters like text color, background, borders, margins, etc.

Submenu: Here you can customize the style of your dropdowns menus, with parameters like text color, background, borders, margins, etc.

Fonts: Here you can customize the fonts of your main menu and the submenus.

The first option, named Menu, allows you to choose between collpase, offcanvas, vertical and inherit layouts.

Mobile Mega Menu

Collapse

This is the default bootstrap menu behaviour. This is an horizontal layout and shows an icon for the mobile menu, on small screens.

View Layout

Offcanvas

This layout display an horizontal menu on the desktop devices and a vertical menu on the mobile devices.

View Layout
WP Vertical MegaMenu

Vertical

This layout displays a vertical menu on both, desktop and mobile devices that can be aligned to the left or the right of the site. The vertical menu will remain hidden and the user will see a toggle button to slide the menu.

View Layout

Inherit

The menu will be integrated into the document section, according to the position of the wp_nav_menu function. This is a perfect layout for menus which are in the sidebar of the site, because it allows you to integrate a vertical menu, regardless of all options that could alter its behavior.

Breakpoint

This option allows you to choose the screen size at which the menu collapses. You can type in the value in pixels, or you can use the slider. A collapsed menu doesn’t display links in the first level, instead it shows an icon to display them.


Selector

Use this option to choose the behavior of the navbar container width. The navbar width will be adjusted to 100% of the width of its container.


Trigger

The Trigger option allows you to choose the action that the user has to carry out to display the dropdown menus first level.


Click: The first click will display the menu and the second click will access the link.


Hover: The mouse movement over the item will display the menu and the first click will access the link.

This hover function makes use of the hoverIntent jQuery Plugin. HoverIntent attempts to predict the user’s intent from the mouse movement. It is similar to jQuery’s hover method, but instead of calling the handlerIn function immediately, hoverIntent waits until the mouse slows down enough, before making the call.

This feature prevents accidental firing of animations or Ajax calls. Simple timeouts work for small areas, but if your target area is large, it may execute regardless of intent. This is where hoverIntent comes in.


Animation

The Animation select box allows you to choose one of the available animations for the dropdown menus. The available options are: FadeInRight to leftLeft to right and Hinge.


Sticky

This option allows you to keep the menu sticky at the top of the page, when the user scrolls down the page. If you choose to set the sticky menu On, there are two more options available.

The Sticky scroll offset option allows you to type in the value in pixels for the length of the scroll at witch the menu will stick at the top of the page.