Forum Replies Created
First of all you will need to purchase the plugin by following the process on the pricing page. An account will automatically be created for you on our site after purchase is completed.
Once you have purchased the plugin, navigate to your account page which can be found here (please note you must log in if not already to view your account). Once here, you will see your orders at the bottom of the page, at which point you need to click on the text that says
View Details and Downloads.
Once here you will see all the purchase details for the purchase including your license key, purchase details, invoices and the download link. To download the file, simply click on the link at the bottom of this page titled
responsive-menu-pro.zipunder the Products section.
Once you click the link, it will start to download a zip file called
responsive-menu-pro.zip, select the
Save Fileoption and choose somewhere on your computer to save it as you will need it shortly.
The next steps are very similar to installing normal WordPress plugins from the repository.
- First, login to your WordPress admin area and navigate on the left sidebar to the option
Plugins, then click
Add Newon the menu options once hovered over.
- Click the
- On the next page, click either of the 2
- The next screen that pops up will ask you to upload the zip file you downloaded above.
- Once selected, the previous screen should now update showing that the plugin is ready to be installed.
- Once you click
Install Now, WordPress will download all the relevant files it needs and the plugin should install successfully.
All that’s left to do now is activate it and you are ready to start using the plugin.
Placeholder. Coming Soon
As of version 3.1.21, released on 19th May 2019 there is now the
Excluded Pagesoption which can be found under the
To exclude the plugin on specific pages you just need to select the drop-down, click on all the pages you want to be excluded and then hit
No more messing around with shortcodes or Custom CSS!
A question I constantly get asked is how to make the menu look like the one on this website. Specifically, people usually wonder about how they can use the plugin to control both the desktop menu and the mobile menu and include both inside the header bar.
It’s actually quite a simple process but let’s go through it step by step together to help you understand it in all it’s complexity.
Step One – Turn on the Header Bar option
The first step is a simple one, all you need to do is navigate to the
Header Bartab from the plugin options and ensure that the
Enabledoption is turned on under the
If you want the header bar to appear on all devices and screen widths then you can do as I have done and set the breakpoint to something huge (I have done a million pixels).
Step Two – Turn on the Desktop Menu option and style accordingly
Next, you need to navigate to the
Desktop Menutab and make sure that this has been turned on.
There are a number of style options on this tab that you can apply including font sizing, colours, menu item heights etc. so go wild and enjoy.
Step Three – Set the point at which the main menu becomes a mobile menu
Now we need to define the breakpoint at which the main menu turns into a mobile hamburger menu. There is no rule here for this as it will be different for every website and as such you will need to play around with this until the breakpoint width matches the point at which your desktop menu becomes too large for the screen width.
The option can be found under the
Initial Setuptab and on this site, it’s set at 1600px wide.
Step Four – Fix the menu inside the header
The last step involves getting the desktop menu to fit inside our header bar.
The trick here is to match the
Positioningoption under the
General Setupheader of the
Desktop Menutab with the positioning of our
Positioningoption in the
Header Barsection. For example, if the header bar has positioning set to absolute then we need to set our desktop menu positioning option to the same, similarly if it is set to fixed then we need fixed for the desktop menu too.
On this website I have a fixed header bar and as such need the desktop menu to be fixed also. I also need my menu to be set to show on the right hand side of the header bar, so I set the
Sideoption accordingly. I also don’t need a fixed width for the menu so I have left it blank so it takes an automatic width.
When your site is visited on every screen size, how do you make sure that only the Responsive Menu is showing?
For this we will need to edit the following 2 settings:
The Responsive Menu plugin uses the users screen size to determine when to show the Responsive Menu and when to hide your main menu, as such you will need to set the
Breakpointoption to something extremely high so as that it is always triggered by any screen size, something like
8000should be sufficient.
CSS of Menu To Hide
This is explained further in the page titled How Do I Hide The Original Menu? but you basically need to find the class or ID of your original menu containing element and place that in the
Original Menu to Hideoption above.
This combined with the high
Breakpointvalue as specified above will mean that only the Responsive Menu is ever showing on your site.
When your site is resized and the Responsive Menu shows, how do you stop your original menu from showing.
For this we will need to edit the following 2 settings:
- Menu Breakpoint
- Original Menu to Hide
The Responsive Menu plugin doesn’t show or hide the Responsive Menu based upon the User Agent or Device being used specifically (iPhone, Android etc.) but rather the size of the current browser window.
This is done consciously to enable it to work correctly across as many devices as possible and to not restrict it to specific mobile/tablets etc.
With this in mind we need to set a point at which the Responsive Menu begins to show and this can be anything you want it to be (it also enables you to use it as your main/only menu if required) and adds greater flexibility.
If you do want to target specific devices then you can use their pixel display widths to target these, otherwise its best to change this value and see what works best on your site. Try changing this value on your site, refreshing your browser and resizing. Doing this multiple times will help you decide what works best for your site.
For example, this site is set to 1050px and this is because this is the point at which my main menu no longer fits on one line in a browser window.
Original Menu to Hide
This can be a bit more complex and if you know nothing about CSS then you may get lost here, however it really isn’t hard once you know what you are looking for.
In this box you will need to add either the ID prefixed with # or a unique class prefixed with . of the containing element of your original menu.
For example if your original menu looked like this:
<div id="main-menu">Home / About / Contact</div>
Then you would add #main-menu to this box. Alternatively:
<div class="main-menu">Home / About / Contact</div>
In this case, you would need to add .main-menu, due to the fact that this is now a class and not an ID.
To find the correct element to hide you can either look at your Themes source files, use a tool like Firebug or Console Tools (by hittig F12) or looking at the source code of the site.
If you are having problems with the menu not showing up on your site after installing and activating the plugin, below are a few of the most common reasons why it won’t show:
Your theme has not been built to the recommended standards
WordPress has a great page for theme developers that they must follow when creating themes otherwise plugins will break (including mine). The full page can be found here but to summarise please ensure the following is true of your theme:
- 1. The
wp_head()function call can be found somewhere in your
header.phptheme file or similar
- 2. The
wp_footer()function call can be found somewhere in your
footer.phptheme file or similar
- 3. The
body_class()function call can be found in the opening
bodyelement of your theme
Your breakpoint option is set too low
The next thing to check is that the
Breakpointoption is set to a high enough value. For example, if you have this set to something low, like 300 it is unlikely you will ever be on a device that is small enough to see the button.
Your HTML is invalid
There is a surprising amount of HTML errors found on sites I look at which cause all sorts of issues. I recommend running your site through the W3 HTML Validator to remove any HTML errors to eliminate this as the cause.
You have the Use Shortcode option turned on
It is possible that you may have enabled the
Use Shortcode?option and forgotten to turn it off again or not realised what it does. If you have enabled this but not placed the shortcode itself inside any of your themes template folders then the menu will not show.
Please try disabling this option first and then try again.
The good news is that it is very easy to find these errors (although fixing them is not always so straight forward).
Firefox Developer Tools
On the HTML tab which gives us a view of all the HTML code on the current page. You can click on each of the different elements and the CSS applied to these sections are automatically updated in the right hand pane, the beauty is you can edit the declarations on the fly and see your changes in real time.
Firebug Console Errors
Errors that need fixing are shown in red. The good news is that the console errors will usually show you the exact file and the exact line as well as the exact error so if you are comfortable in fixing this yourself you can go in and do it yourself, if not you have a very clear and concise error to provide to a web developer or online community like Stack Overflow to look for help.
License Key Invalid
If you are getting this message please check the following:
- You are copying the License Key from the license key email and not your WordPress auto-generated password (they are in separate emails).
- You are making sure not to copy any trailing spaces at the beginning or end of the license key (easy to do when copying from an email).
- Your web host allows external connections – this is required as your site needs to contact my site to check that the license is valid.
cURL error 35: error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure
If you are seeing the above message then this one is actually a lot easier to fix.
This basically means that either your curl or openssl software on your server is out of date (including local installations using LAMP, MAMP, WAMP etc.). You will need to speak to your webhost about upgrading the software or alternatively upgrade this yourself.
cURL error 28: Operation timed out after 2000 milliseconds with 0 bytes received
If you are seeing an issue similar to the above (the numbers might be different) then this could be one of two things.
It either means there is an outage on my site, however if you are seeing this page then that is likely not the case, or there is an issue with cURL on your server with making external connections.
The best thing to do in this situation is wait 5/10 minutes and if the problem still persists and my site appears to be working fine then contact your web host. They should be able to look at your logs and see if there are any issues with external connections from your server.
If after all the above, it is still not working for you then please feel free to contact me and we will see if we can track down the issue.
We utilise the great work done by the guys at Font Awesome and GlyphIcon to provide you with access to over 900 icons along with support for FontAwesome effects including pulse and spin along with sizing and rotation options. In addition to this you are able to use your own Custom HTML to put whatever you want in there such as images or shortcodes.
Full documentation for using Font Awesome icons can be found on their documentation pages here and for GlyphIcons you can find them here. If you would like to see a list of all the icons available you can also find those resources here (FontAwesome) and here (GlyphIcons).
When using font icons, you don’t need the `fa-` prefix on the icon name itself for FontAwesome or `glyphicon` for GlyphIcons as we handle all that for you. You will need it however for any effects, sizing or rotations added.
Let’s start by creating a couple of Font Icons for our menu items. Out of the box the Responsive Menu for this site, without Font Icons looks like below:
Now, we do think the menu already looks beautiful as it is, but it could do with some “snazzying up” to really make it stand out from the crowd, that’s where Font Icons come in!
If you navigate to the Responsive Menu admin page and look under the Menu tab, the first option header is labelled Font Icons. Here you will see a section to add as many Font Icons as your heart desires. The default and empty option will look something like below:
In our example above we need to find some appropriate Font Icons to match the pages.
Time to head over to the Icons List at Font Awesome to search. Typing in the search term info, provides us with the following results below:
I quite like the Font Icon with the `question-circle` above, so why not use that?
First we need to click on the icon in the list which will take us to the `question-circle` page and give us further information about it’s usage. The page should look something like the below:
As we can see this icon is of the type Solid. We need to keep this in mind when adding it to our menu. Let’s add this to our Font Icon option in the Responsive Menu admin for our FAQ page as below:
As you can see all we have done is select the
Menu ItemAbout, put question-circle inside the
Iconcolumn (remember the fa-prefix is not needed) and selected FontAwesome Strong (fas) from the
Now we just need to hit the Update Options button and refresh our page on the front end. Once the page has reloaded we will now see that the Question Icon has been added next to our FAQ link:
But we don’t have to stop there. We can continue adding Font Icons for as many menu items as we want, in our example above we can fill out an icon for each menu item so the menu admin and front end look like below:
This translates on the front end to (you can see that the sub-menu triggers and the sub-menu links themselves both have font icons associated to them):
I hope you agree with us that this is much more appealing and only took about 2 minutes work to setup!
Font Awesome Icons also support animations such as pulse and spin as well as icon rotations and image sizing. As Font Awesome Icons supports them, so do we.
Simply append your icon with the appropriate affect such as fa-spin to the end of the icon you chose. For example to make the user icon above for the Account page spin (silly idea we know!) then you would enter in the options box user fa-spin. A full break down of the affects and rotation options etc. can be found on the Font Awesome Examples page.
All of the above applies equally to any area where a Font Icon option is provided in the admin options area
The process for creating GlyphIcons font icons is 95% identical to the section on FontAwesome icons above so I will only talk about the differences here. To get a list of the currently available GlyphIcons you need to first navigate to this page here, which will look similar to what you see below:
Unfortunately GlyphIcon doesn’t have a fancy search tool like FontAwesome does but once you find one you like you need to copy it’s reference name such as glyphicon glyphicon-music and strip out any mention of the word glyphicon. In the previous example that will simply leave us with music, this is all we need.
The second thing to remember of course is to change the drop-down to have GlyphIcon selected, an example selection of GlyphIcons setup can be seen below:
The custom option is literally for you to put whatever you please in there as any valid HTML will be accepted. The most obvious example and largest use case is for custom images. Simply type in the html for your image and voila! it will show next to your menu item, a few examples of how this might be used can be seen below:
Mixing and matching
The last thing to note is that you can mix and match to your hearts content. You can have 5 FontAwesome icons, 12 GlyphIcons and as many Custom icons as your heart desires! The only thing that will limit you is your imagination!
The menu will work straight out of the box as soon as it has been activated as long as the
wp_footer()calls are found in your
Sometimes however you may want a bit more control over the menu, like setting different options based on certain conditions – including different menus on different pages or for placing it inside a specific DOM element.
Using the technique above you can also use different menus for different languages all using the same plugin with the same settings.
This can all be achieved by using the built in shortcode and as with everything else with the plugin it is very easy to use.
Enable the Shortcode
The first thing you need to do is enable the shortcode option itself as without it the shortcode will not be active and you will just see text displayed on your site when trying to use it.
The option to turn the Shortcode on can be found in the
Advancedtab, under the
As you can see from the image above the shortcode is very easy to turn on and with if you get a few extra options for changing particular information on the fly – a small table of these is shown below:
Option Description menu_to_use Change which menu is displayed. theme_location_menu Change the theme location menu that is displayed. This will overwrite the
menu_title Change the menu title. menu_title_link Change the menu title link location. button_title Change the button text.
Using the Shortcode
Using the shortcode is done the same as any other shortcode in WordPress and you can find out more about them from the WordPress pages by clicking here.
You can either use the shortcode in your pages by simply placing the text
[responsive_menu_pro]in your pages depending on which version you have installed, alternatively you can include this directly in your template files (usually inside header.php) as below:
[php]<?php echo do_shortcode('[responsive_menu]'); ?>[/php]
and for the pro version:
[php]<?php echo do_shortcode('[responsive_menu_pro]'); ?>[/php]
Using custom options
The custom options mentioned earlier are easily used by simply attaching them to the shortcode as below:
[php]<?php echo do_shortcode('[responsive_menu_pro menu_title="Alternative Title"]'); ?>;[/php]
Doing the above is a great way of customising the menu for individual pages, as you can change the menu title to something different on blog pages to actual pages.
Doing the below you can change the menu that is used by the plugin entirely.
[php]<?php echo do_shortcode('[responsive_menu_pro menu_to_use="menu-2"]'); ?>[/php]
Different Menu for Logged In Users
If you would like to show a different menu (with different options) for logged in users, you could do the following:
[php]<?php if(is_user_logged_in()) echo do_shortcode('[responsive_menu]'); else echo do_shortcode('[responsive_menu menu_to_use="logged-in-menu"]'); ?>[/php]
Different Menus for Different Languages
Another common request is to have the ability to show different menus for different languages on your site.
Again, the below example will need to be modified and added to your
footer.phpfile, with your own custom logic in place of the
get_locale()switch function and custom menu options in the code below:
[php]<?php switch(get_locale()) : case 'en_EN' : $menu = 'english-menu'; break; case 'es_ES' : $menu = 'spanish-menu'; break; case 'fr_FR' : $menu = 'french-menu'; break; default : $menu = ''; endswitch; echo do_shortcode('[responsive_menu menu_to_use="' . $menu . '"]'); ?>[/php]
Although this page is relatively short, don’t be fooled – the shortcode option gives you great flexibility and the only limit is your imagination!
- First, login to your WordPress admin area and navigate on the left sidebar to the option