In this tutorial, we integrate Responsive Menu Pro with the WPML plugin you need to follow the below-mentioned steps.

Step 1:�Be on the Latest Version of the Responsive Menu Pro. Check for plugin updates, if you find product updates in the plugins section make sure to update them.

Step 2: We need to Install and configure WPML if you haven�t already, follow the below-mentioned steps

a) To install WPML, log into your�WPML Account�and go to the Downloads page to download the OTGS installer plugin

b) Upload and activate the OTGS installer plugin

c) After installation, click on the Register WPML link and then �Get a key for this site�. This will take you to your WPML account

d) Generate a key and copy-paste it back to your site.

e) After registering, you can see a list of all available WPML plugins for you to download and activate, you can download and activate any WPML component from the list.

f) After WPML installation & activation you now need to configure it, for that click on the Configure WPML button on the admin notice that can be found on the top of the screen.

g) A setup wizard opens up with various configuration tabs.

h) Selecting Languages, Select all the languages that you want to translate your site into

i) WPML offers various translation options, you can choose how you�d want to translate your site. You can go with automatic translation, local translators, translate yourself or use a translation service.

Step 3:�Depending on the languages installed on your website and the default language set (English in this case), you now need to check the Editing Language checkbox in the WPML Language Settings.

To do so, navigate to�Users�->�Profile�->�WPML Language Settings�->�Editing Languages. Check the option -> Set admin language as editing language.

Step 4:�Now, you need to enable the option that says make themes work multilingual from the WPML plugin navigate to�Languages�->�Make Theme work multi-lingual. Check the option.

Step 5:�Ensure the Post Type Translation is set to �Not Translatable� for the Responsive Menu. This can be done by navigating to�WPML�->�Settings�->�Post Types Translation

Step 6:�Create pages in English (Default Language) and translate them to other preferred languages. In this example, the pages are translated to Spanish and Italian respectively.

Step 7:�Create an English Menu (Default Language) by navigating to�Appearance�->�Menus. Create an English menu.

Step 8:�Switch to Italian (or your preferred language) in the admin language switcher and create an Italian menu and select as the translation of the English menu.

Repeat this step for the other language, in this case, for the Spanish Menu.

Step 9:�Now, Switch back to English in the admin language switcher of WPML. Go to�Responsive Menu�->�Menus�to create a menu for English.

Step 10:�Navigate to the Responsive Menu Plugin and set up the Mega Menu for English Menu.

Step 11:�Switch to Italian in the admin language switcher of WPML. Go to Responsive Menu -> Menus to create a menu for Italian.

Step 12:�Now set up Mega Menu for Italian, watch this video.

Repeat steps 11 and 12 for setting up the Spanish Menu.

And, this is the final result.

So this is how you Integrate the Responsive Menu with WPML. If you face any difficulty during the integration process you can�raise a support ticket here.

This might happen if your site is completely new and has no menus or you�ve done a complete reset of your website. Whichever reason it may be. To solve this problem, we�ve created a detailed guide that explains how to create a menu in WordPress and why the plugin needs it.

Steps for Creating Menus in WordPress

1. From your WordPress Dashboard click on the “Appearance” link in the left sidebar.�
2. Click on the “Menus” link in the left sidebar.�
3. Enter the name of your menu in the “Menu Name” field.�
4. Click the “Create Menu” button.�
5. Add the pages you want to include in your menu by selecting them from the “Pages” drop-down menu and clicking the “Add to Menu” button.�
6. Similarly, you can add Posts, Custom Links, and Categories to your menu
7. Reorder your menu items by dragging and dropping them into the desired order.�
8. Click the “Save Menu” button.

You can create multiple menus for various uses, a different menu for the footer, top navigation menu, etc. To again create a different menu click on the �create a new menu� link in the Edit Menus tab.

Learn more about WordPress Menus

Creating a New Menu inside the Responsive Menu Plugin

After you�ve successfully created a WordPress menu you can go ahead and customize the menu using the Responsive Menu Plugin. For that, navigate to the Responsive Menu and Click Create New Menu button.

Why Responsive Menu Plugin needs an Existing Menu?

Responsive Menu Plugin needs an existing menu and its elements so it can make it responsive for you. The responsive Menu plugin provides you with an intuitive way to customize your existing WordPress menu with multiple customization options like Text, Fonts, Icons, Transitions, Backgrounds, CSS Elements, etc.

The existing menu acts as a base for the Responsive Menu Plugin to operate. You can create any number of menus for your website using different menu items like Links, Pages, Posts, Categories, etc.

According to our investigation, this is probably a WordPress core File Structure issue. As per the WordPress.org guidelines, we cannot alter the filesystem($wp_filesystem) function so unfortunately, there is not much we can do from our end.

The issue has been highlighted by other developers too and WordPress.org will take note of your issue and hopefully fix it soon.

So you would need to follow these instructions if you are using the FS_METHOD or $wp_filesystem elsewhere other than our RM Plugin. We came up with two solutions for this problem:

Solution 1

Redefine define(‘FS_METHOD’, ‘direct’)

This function will allow you to redefine FS METHOD to direct if you are using any other method like the following:

• ssh2
• ftpext
• ftpsockets

You can use the following filesystem_method hook based on your condition.

if (!function_exists("mysite_filesystem_method")) {
    function mysite_filesystem_method($method) {
        $method = is_admin() ? "direct" : $method;
        return $method;
    }
}
add_filter("filesystem_method", "mysite_filesystem_method");

Solution 2

Open your wp_config.php if you have defined FS_METHOD in any other method like ssh2, ftpex, etc. instead of direct

For example, use define('FS_METHOD', 'direct'); and not define('FS_METHOD', 'ftpext');

If FS_Method is not defined as direct, you will receive an error from the WP FileSystem. If you are using the WP CLI command then you need to follow the instructions directed by wordpress.org

Refer to this user comment to know more

If both the solutions don’t work connect with the Responsive Menu support and our support personnel will help you with this.

For this, we’ll be using the Responsive Menu Pro Plugin. Responsive Menu Pro unlocks the ability to create a Desktop/Menu & Header Bar and brings in more customization options. As for the sake of this tutorial we’ll be just dealing with the Mobile & Desktop Menu.

Step 1: Install Responsive Menu Pro

So, to begin with, You need to install & set up the Responsive Menu Plugin. If you haven’t here’s a quick tutorial on installing and setting up the plugin for first use.

Step 2: Setup the Device Breakpoints

After setting up the plugin, go to Customize > Settings > Advanced Settings. Here in the Device Breakpoints set the Tablet Breakpoint to 800 px to disable Hamburger Menu on Desktop. To disable the Hamburger Icon on Tablet screen sizes too, set the Tablet BreakPoint value to 700 px. Hit the Update button to see the changes.

Step 3: Setup the Menu width

The Hamburger Menu Icon will now be visible on your website’s menu. Next, we need to set up the Desktop Menu on your site. For this navigate to Desktop Menu > General Setup and add width. I’ve added width of 100% as seen below.

Now, we can enable all our menu items and create a Full-Fledged Mega Menu. We’ve discussed in this blog post how you can create a Mega Menu with the Responsive Plugin.

From your Responsive Menu Plugin navigate to the Settings > General Settings. Here you will see the Hide Theme Menu Option.

With this option, you can hide your current theme menu. To hide your current theme menu you need to put the CSS selector here. Any legal CSS selection criteria are valid.

By default, the original WordPress menu is displayed alongside the new Responsive Hamburger Menu (and sometimes even gets overlapped) if the original WordPress menu is not hidden.

So, Here you will need to manually hide the menu by entering the CSS Selector. You can find the original Menu Selector by right-clicking on the original menu > Inspect Element. Now click on the original menu to hide and copy the adjacent id or class selector.

For Example: class=" mobile -nav-toggle" or id="primary-mobile-menu" and paste it in the Hide Theme Menu Field with a prefix# for id or a . for a class selector.

For Example: If the selector is id="primary-mobile-menu" then you would enter #primary-mobile-menu in the Hide Theme Menu field.

You can hide multiple menus and even the original header each selector separated by a comma with the same method to understand better watch this video.

Note: While entering the class as your preferred selector to hide make sure that it is unique and not commonly used by other elements too. If it is common then it may also hide other elements using it.

Want to how the theme would actually look like on a website? Check out the Glance RM Theme Demo and see yourself.

The Glance RM Theme comes with a host of settings like the Slide Direction, Skew angle, Sliding Background Color, Sliding Speed, and much more. Following are all its Settings:

• Theme Details: It consists of the current theme details like the Theme Name, a snapshot, and an option to change the theme.
  • Change Theme: Using this you can change the theme to any other Free or Pro themes that you’ve purchased.
  • Save As Theme(Template): Using this option you can save any theme with its currently used settings and configuration like the Menu Color being used, Menu Title Configuration, The current Appearance, etc. in a Template. This way you can have many templates with different customizations and settings and can later use the saved settings by navigating to Change Themes > Templates.

• Side: It sets the side from where you want the skew animation to appear. You can select from Right and Left. Depending on what Side you choose the content will also automatically be aligned including the animations. By default, the Glance Animation will appear from the Left.
• Skew(In Degrees): Alter the Skew Angle about how you want the skew to happen. It is recommended to set the skew angle to the default value i.e.( -15) and not change the Skew angle as it may clash with other elements and break the appearance.
• Sliding Background Color: This allows you to alter the Sliding Background color to any color that can be the best match to your website’s color scheme.
• Sliding Speed: Set the sliding animation speed to any value depending on how quick or slow you want the animation to happen. The default Sliding Speed is set to 500 milliseconds.
• Enable Skew Shadow: If this option is enabled you can display a Skew Shadow between the Sliding Background and the default container background.
• Skew Shadow Color: With this option, you can alter the skew shadow color to any color to match your Sliding Background Color.
• Enable Menu Item Text Shadow: If you enable this option a shadow will be displayed on the menu items text.

The Glance RM Theme is not a preferred choice for those who are planning to add more menus and sub-menu items (i.e. more than 8 menu items) as it will be difficult to properly view the contents due to the skew structure. It is best suitable for mobile use with fewer menu items to make a light menu.

The effect remains the same in all three device options i.e Mobile Device, Tablet, or Desktop Device. Using the Responsive Menu Customization Options you can customize the theme much more.

Also, you can change other Menu Settings like the Container Appearance Background Color to any color of your choice. By default, this theme comes with a pre-applied background-color that is white. You can set menu items depending on how it is going to look in the final output.

Customize the Toggle Button and make it in sync with your website�s color scheme by changing the Button Style like the Background Color, Background Hover Active Color, Also transform the button to a Square or Circle by altering the Border Radius, etc.

By Using the Button Position you can set the Menu Toggle button to the desired position whilst altering things like the Distance from Side, Distance from Top, Position, and Side.

Customize the Search Box by changing its border color, placeholder color, text color, and background color by navigating to Mobile Menu> Container > Search

Using the Container Option you can sync additional content like adding Social Media Icons, Email, Phone or any other links or details can be added or else turn off the Additional Content Option if not required.

You can change the menu item styling too like the Item Height, Line Height, Padding, Typography, Text Color, Background Color, Border, etc. Thus you can set the color scheme and the appearance depending on your website�s color scheme to make it a perfect match and equally attractive.

Note: By default, the Container Animation is set to Type Fade. It is recommended to keep the container animation type to Fade. Though changing it to any other type won�t cause any harm to the menu but it affects the menu behavior as the theme is made to fade open the menu by slightly fading the site contents.

Also, the Glance RM Theme is compatible with Responsive Menu v4.1.0 and above. If you are any of the lower Responsive Menu versions then it is recommended to upgrade to the latest version to enjoy the Glance RM Theme on your website.

Want to how the theme would actually look like on a website? Check out the�Wave RM Theme Demo and see yourself.

As of now, With the Wave RM Theme, we have introduced just a single dedicated theme setting that is to enable/disable the ripple animation.

• Theme Details: It consists of the current theme details like the Theme Name, a snapshot, and an option to change the theme.
  • Change Theme: Using this you can change the theme to any other Free or Pro themes that you’ve purchased.
  • Save As Theme(Template): Using this option you can save any theme with its currently used settings and configuration like the Menu Color being used, Menu Title Configuration, The current Appearance, etc. in a Template. This way you can have many templates with different customizations and settings and can later use the saved settings by navigating to Change Themes > Templates.

Enable Menu Item Animation: If enabled you will experience a ripple animation effect whenever the user toggles through the Menu Button.

The effect remains the same in all three device options i.e Mobile Device, Tablet, or Desktop Device.

You can Customize the Toggle Button and let it be in sync with your website’s color scheme by changing the Button Style like the Background Color, Background Hover Active Color, Also transform the button to a Square or Circle by altering the Border Radius, etc.

By Using the Button Position you can set the Menu Toggle button to the desired position whilst altering things like the Distance from Side, Distance from Top, Position, and Side. Using the Responsive Menu Customization Options you can customize the theme much more.

Also, you can change other Menu Settings like the Container Appearance Background Color to any color of your choice or go with a background image. By default, this theme comes with a pre-applied background-color along with a background image

Customize the Search Box by changing its border color, placeholder color, text color, and background color by navigating to Mobile Menu> Container > Search

By Using the Container Option you can sync additional content like adding Social Media Icons, Email, Phone or any other links or details can be added or else turn off the Additional Content Option if not required.

You can change the menu item styling too like the Item Height, Line Height, Padding, Typography, Text Color, Background Color, Border, etc. Thus you can set the color scheme and the appearance depending on your website�s color scheme to make it a perfect match and equally attractive.

Note: By default, the Container Animation is set to Type Fade. It is recommended to keep the container animation type to Fade. Though changing it to any other type won�t cause any harm to the menu but it affects the menu behavior as the theme is made to fade open the menu by slightly fading the site contents. �

Also, the Wave RM Theme is compatible with Responsive Menu v4.1.0 and above. If you are any of the lower Responsive Menu versions then it is recommended to upgrade to the latest version to enjoy the Wave RM Theme on your website.

Want to how the theme would actually look like on a website? Check out the�Oshine RM Theme Demo and see yourself.

With the Oshine RM Theme, we have introduced two new theme options that can be used to modify theme settings.

• Theme Details: It consists of the current theme details like the Theme Name, a snapshot, and an option to change the theme.
  • Change Theme: Using this you can change the theme to any other Free or Pro themes that you’ve purchased.
  • Save As Theme(Template): Using this option you can save any theme with its currently used settings and configuration like the Menu Color being used, Menu Title Configuration, The current Appearance, etc. in a Template. This way you can have many templates with different customizations and settings and can later use the saved settings by navigating to Change Themes > Templates.
• Oshine RM Theme Settings:
  • Slide:
    1. Left: The menu toggle button will appear on the left and the menu container will also slide-in from the left. Also, the menu items will toggle from the Left to the Right inside the container.
    2. Right: The menu toggle button will appear on the right and the menu container will also slide-in from the right. Also, the menu items will toggle from the Left to the Right inside the container.
  • Stack Color: The theme allows you to change the Stack Effect Color when the menu button is toggled. You see a beautiful layer stack when the menu is active. You can set the color to any of your preferred colors according to your website’s background or color scheme. You can set the color using the color palette.

The effect remains the same in all three device options i.e Mobile Device, Tablet, or Desktop Device.

Customize the Search Box by changing its border color, placeholder color, text color, and background color by navigating to Mobile Menu> Container > Search. Using the Responsive Menu Customization Options you can customize the theme much more.

Using the Container Option you can sync additional content like adding Social Media Icons, Email, Phone or any other links or details can be added or else turn off the Additional Content Option if not required.

Also, you can change other Menu Settings like the Container Appearance Background Color to any color of your choice or go with a background image.

You can also change the menu item styling too like the Item Height, Line Height, Padding, Typography, Text Color, Background Color, Border, etc. Thus you can set the color scheme and the appearance depending on your website’s color scheme to make it a perfect match and equally attractive.

Note: By default, the Container Animation is set to Type Push. It is recommended to keep the container animation type to Push. Though changing it to any other type won’t cause any harm to the menu but it affects the menu behavior as the theme is made to push open the menu by pushing site contents.

Also, the Oshine RM Theme is compatible with Responsive Menu v4.1.0 and above. If you are any of the lower Responsive Menu versions then it is recommended to upgrade to the latest version to enjoy the Oshine RM Theme on your website.

�

What it means is that now you can display the new Desktop Menu built with the Responsive Menu on the exact location of the current theme’s menu. So, to show up the menu on the current theme’s active menu’s location follow the below steps:

1. Check Display Location

To make this feature work first you need to associate the menu with the existing WordPress Menu Display Location. Navigate to Appearance > Menus > Menu Settings > Display Location

Here make sure you have selected the menu to use.

2. Enable the Use Theme Location Option

If enabled, the menu will show up at the theme location assigned to the WordPress menu.

3. Hit the Update Button

After making the required changes go ahead and hit the Update button to save the changes.

If you are thinking of adding a Responsive Menu on your webpage using the Elementor page builder it will now be possible. We have added the Responsive Menu Widget which you can take advantage of while building an awesome looking webpage using Elementor.

Make sure both the Responsive Menu and the Elementor Plugins are activated. Now, you just need to search for “Responsive Menu” inside the Elements Search Bar. And then just drag and drop the Responsive Menu widget inside your webpage.

Note: The Responsive Menu Widget for Elementor is released with a limited number of settings. We are in the process of including more customizations in the future product updates.

Once you have added the Responsive Menu Widget to your webpage you will notice that the added menu doesn’t work when you try to toggle it. There’s nothing to worry about it will work once you hit the preview button and open it up in the preview mode.

Also, if you want to open up the customizer of the menu that is currently in use you can easily do that by hitting the “Responsive Menu Customizer” link in red text. This will open up the customizer and you can make the required changes to your menu.

Note: It is recommended to set the Display Condition of the menu in use to “Use as Shortcode“. This can be done by navigating to Responsive Menu > Customize > Settings > General Settings > Display Condition. It is just to prevent any conflicts that may occur with the default page menu that will be loaded along with the newly displayed menu using Elementor.