9.2. Themes 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.

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 on 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 handler 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 which the menu will stick at the top of the page.