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 Colors
| 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. |
| Height | Set a height for the title image. |
| Width | Set a width for the title image. |
| 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. |
Animations
| 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:
|
| Push Wrapper | The CSS selector(s) of your page that you want pushed when using the push animation above.
For example #page-wrapper, #wrapper
|
Search
| Option | Explanation |
| Text Colour | Set the text colour of the search text that a user types in. |
| Border Colour | Set the border colour for the search box. |
| Background Colour | Set the background colour for the search box. |
| Placeholder Text | This is the text that shows up in the search box when empty or before someone starts typing as a hint.
For example “Type to search for products…”
|
| Placeholder Colour | Set the colour of the placeholder text.
This won’t work in many older browsers.
|
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.
|
| Close on Page Scroll | Set this if you want the container to close whenever you scroll the page. |
| 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. |