1. Activating the Mobile Menu (Vamtam Push Menu Plugin)


To install and activate the mobile menu (Vamtam Push Menu Plugin) please go to Appearance > Install Plugins:





2. Updating the Mobile Menu (Vamtam Push Menu Plugin)



Make sure you are running Vamtam Push Menu version 2.07 or higher. In case you are running an old plugin version please follow this guide to update:

How to update the theme and bundled plugins (points #2 and #4 for the bundled plugins as Vamtam Push Menu)

 



3. Setting up the Mobile Menu (Vamtam Push Menu Plugin)



Make sure there is a menu selected for the mobile menu location called "Push menu".


Go to Appearance > Menus > Manage Locations > Push menu > select a menu from the drop down.

 

 




4. Troubleshooting 


Case 1: If you've done all previous steps and it still doesn't work, please deactivate all plugins that don't come with the theme to rule out any third party conflicts.

Case 2: If you've done all previous steps and it still doesn't work, please check the value of VamTam > Layout > Header > Mobile Header > Enable Below. If it is set too low, the menu is never actually enabled - set it to a more appropriate value in order to resolve the issue.

Case 3: If you need to make static at the top of the page the mobile menu's icon 

Q: The mobile menu burger icon floats over the page content - Is there any way to keep it static at the top of the page? 

A: Please add this to the Custom CSS area in VamTam > General:


 

.mp-menu {
    position: absolute !important;
}

html {
    overflow-y: visible !important;
}

 



5. Styling the mobile menu


There are two ways to style the mobile menu - in the theme's options panel or by adding some custom CSS.



5.1. Global Accent Colors are located in Dashboard > Vamtam > Styles > Global Colors and Backgrounds:




5.2. If you would like to change the colors of the push menu without changing the general accent colors in the theme, you can add some custom CSS code using the Custom CSS area in the VamTam options panel:


Please go to VamTam > General settings > Custom CSS








       1. To edit the MENU string's color add the code below to the Custom CSS area and modify the colors to your preference:

.csstransforms.js .responsive-layout .mp-menu h2 {
 color: #fff;
}

  


       2. To edit the burger icon's color add the code below to the Custom CSS area and modify the colors to your preference:

.csstransforms3d.js .responsive-layout #mp-menu-trigger:before {
color: #000000;
}

 


       3. To edit the BACK link's color add the code below to the Custom CSS area and modify the colors to your preference

.csstransforms.js .responsive-layout .mp-back {
 color: #000;
 background: #A7DFF9;
}

 


        4. To edit the menu links' color add the code below to the Custom CSS area and modify the colors to your preference 

.csstransforms.js .responsive-layout .mp-menu ul li > a {
 color: #3E4043;
}

 


        * To edit the menu links' hover/active color add the code below to the Custom CSS area and modify the colors to your preference

.csstransforms.js .responsive-layout .mp-menu ul li > a:hover {
 color: #3695EB;
}

 


       * To edit the submenu links' color add the code below to the Custom CSS area and modify the colors to your preference 

.csstransforms.js .responsive-layout .mp-level {
 background: #25215b;
}

 


        5. To edit the push menu background add the code below to the Custom CSS area and modify the colors to your preference

.csstransforms.js .responsive-layout .mp-level { 
background: #000000;
}

  



6. Translating the "Back" and "Menu" hardcoded strings



The strings "Back" and "Menu" are located in the plugin's language file: vamtam-push-menu.pot 

You can reach this file in wp-content/plugins/vamtam-push-menu/languages



What you have to do is: 


6.1. Download and install а gettext file editor, like Poedit on your computer. 

To download the Poedit please go to this URL http://poedit.net/download.php. Choose between Download for OS X or Download for Windows options.




6.2. Download a copy of the plugin's language file vamtam-push-menu.pot, located in wp-content/plugins/vamtam-push-menu/languages, to your computer using your FTP program of choice. 


6.3. Open the Poedit program and choose Create new translation.

6.4. Choosing the language of the translation, Poedit will automatically create a .po file and will name it with the appropriate language code. You can find all language and country code here.

6.5. To translate the strings in your language just click on a text row and translate each line as required. 

When you've translated all the text you'd like translated, click on the Save button to save or overwrite the previous .po file on your computer. Click on Save button again to generate a .mo file which is the one that WordPress will use to translate your theme. 


  • You can set your Poedit to always compile a .mo file when saving changes from: Poedit >> Preferences >> on the Editor tab check the Automatically compile .mo file on save box


6.6. The name of the .mo file is very important. It’s also case sensitive. If it doesn’t match the plugin name, language code, and country code it won’t work. Same goes for the define constant in step 2 above. 


File naming format should be as follows:


[PLUGIN NAME]-[LANGUAGE CODE]_[COUNTRY CODE].mo


Example: vamtam-push-menu-it_IT.mo



6.7. Upload the newly translated .po and .mo files in the directory: /yoursite.com/wp-content/languages/plugins/vamtam-push-menu-it_IT.mo


  • Please note that you don't have to delete the .pot file. If you want to translate the theme in other language you will need it. 
  • The .po file is your editable file which you can always load back up in poedit and update. If you edit the .po file, you have to generate a new .mo file. Also replace old .po and .mo files with the new ones in your language folder.


6.8. Make a change to your WordPress wp-config.php file (located in your WP root directory) with the correct language codes like the example below. The first two letters are for the language code and the other two letters are for the country code. You can find all language and country codes here. 

For example, if you wanted to use Italian:  define ('WPLANG', 'it_IT')






7. Customisation of "Back" and "Menu" hardcoded strings



If you need to rename the "Menu" and "Back" strings of the mobile menu, you will need to edit the plugin directly. Please note that you will have to repeat these changes after every update of the plugin.


Edit wp-content/plugins/vamtam-push-menu/push-menu.php 

The strings that you are looking for are on lines 111 and 117.