Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

How To Set The Mobile Menu and Navigation Trigger Width

Most themes trigger the Vertex mobile navigation at around 750px screen width. Sometimes users need these functions to be called at a different trigger point, or a design requires it. In this Tutorial you will learn how to make this adjustment.

Upgrade Vertex

Make sure you are running the most current Vertex files on your site. You can do this by following the tutorial given here.

Trigger Settings

  1. In the template configuration proceed to the Main / Responsive Nav configuration area:
  2. Under this area you will find two settings: Trigger Width and Large Screen Width. Use these settings to adjust when the mobile navigation will appear and set the size for larger screens.
  3. Trigger Width - This is the width where the mobile layout takes effect. We recommend using 750 for this setting, but it can be more or less. Also some themes may be designed to use a certain trigger point.
  4. Large Screen Width - If your trigger width is set high to allow the menu to show on larger screens you can use this setting to force the off canvas area to a set px width. Once the screen size reaches 650px this settings will be overridden and 80% will be used instead.

Adjusting CSS

Some themes are specifically designed to have css trigger at the same time as the mobile navigation. These items cannot be triggered with the settings mentioned above since they are coded as pure css, and will need to be adjusted in the css/s5_responsive.css file. Edit that file with your favorite editor and find the code below. Change that 750 max-width to match the setting you have selected for your Trigger Width setting. This may not be required for every theme.

@media screen and (max-width: 750px){

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.