Builder Construction Architect Renovation theme Help Desk

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

@media (max-width: 989px) {
.responsive-layout .mp-menu h2 {
    color: #000000;
}
}

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

@media (max-width: 989px){
.responsive-layout #mp-menu-trigger:before {
    color: #ffffff;
}
}

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

@media (max-width: 989px){
.responsive-layout .mp-back::after {
    color: #000019;
}
}

@media (max-width: 989px){
.responsive-layout .mp-back {
    color: #000;
}
}

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

@media (max-width: 989px){
.responsive-layout .mp-menu ul li > a {
    color: #000000;
}
}

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

@media (max-width: 989px) {
.responsive-layout .mp-level {
    background: #000000;
}
}