Container

This section deals with the Container tab from the admin and attempts to document all the options available.

Ordering

The plug-in allows you to re-order and turn off items in the menu in a very easy and intuitive way. To re-order the items simply click and drag them around and to turn the various options on and off simply click the ON or OFF buttons to the left of each item.

Leaving the additional content or title text fields blank will automatically hide these on the front-end

Sizing

You have the ability to change a few settings in regards the sizing of the menu itself, each of which are explained below:

Option Explanation
Width Set the width of the container once the button has been pressed.
Maximum Width Set a maximum width on the container, useful if you don’t want it to be unnecessarily large on wider screens.
Minimum Width Set a minimum width on the container, useful if it becomes too small on smaller screens.
Auto Height Makes the container height stop at the end of the last container item, rather than spanning the height of the page.

Background

Option Explanation
Image Set a background image which covers the entire container.
Container Colour Set a background colour for the container that stretches the full height of the screen.
Inner Container Colour Set a background colour for the inner container that contains the menu, title, additional HTML, search etc.

Title Text

Option Explanation
Font Size Specify a font size for the title.
Text Set the title text to appear for the title section.
Link Specify a link for the title text to navigate to when clicked.
Link Target Determine how the title link opens when clicked on.

You can specify for it to open in the same page, on a new tab or in a completely separate window.

Title Colours

Option Explanation
Background You can specify a separate background colour for the title section if you wish.
Background Hover Set the title section background colour when the mouse is rolled over it.
Text You can specify a separate text colour for the title section if you wish.
Text Hover Set the title section text colour when the mouse is rolled over it.

Title Image

Option Explanation
Image Specify an image to show alongside the title.
Alt Text Specify the alt text used with the title image if selected.
Font Icon Specify a font icon to go alongside the title.

Additional Content

Option Explanation
Content This section allows you to put any custom HTML, shortcodes, text or anything you like to supplement the other container items.

It’s particularly useful if you have social media icons, shopping cart information or anything else custom to your site.

HTML and shortcodes can be used here.
Colour You can set the text colour of the additional content here if you desire.

Animation

Option Explanation
Appear From This determines which side of the screen the container appears from.
Type You can choose the type of animation used for showing the container. Currently there are 3 options:

  • Slide – Slides the container in from the location specified above.
  • Push – Used if you want to push your page across when the container slides in.
  • Fade – Used if you want to fade the container in on the page rather than sliding in.
Push Wrapper The CSS selector(s) of your page that you want pushed when using the push animation above.

For example #page-wrapper, #wrapper

Technical

Option Explanation
Close on Page Clicks Set this if you want the container to close whenever you click or tap on the page.
Close on Link Clicks Set this if you want the container to close whenever you click or tap on any of the menu link items.

Useful on one page sites where the page doesn’t reload.
Enable Touch Gestures This will enable you to drag or swipe to close the container on touch devices.

Keyboard Shortcuts

Option Explanation
Close Select some keyboard shortcuts that will close the container when pressed.
Open Select some keyboard shortcuts that will close the container when pressed.

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed