Why won’t my menu show?

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.php theme file or similar
  • 2. The wp_footer() function call can be found somewhere in your footer.php theme file or similar
  • 3. The body_class() function call can be found in the opening body element of your theme

Your breakpoint option is set too low

The next thing to check is that the Initial Setup > Breakpoint option 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.

License Activation Issues

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 space at the beginning or end of the license key (easy to do when copying from an email).
  • You’re web host allows external connections – this is required as youre 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.

How do I use the Responsive Menu as my Menu Menu?

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:

Menu Breakpoint

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 Breakpoint option to something extremely high so as that it is always triggered by any screen size, something like 8000 should 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 Hide option above.

This combined with the high Breakpoint value as specified above will mean that only the Responsive Menu is ever showing on your site.

How Do I Show Different Menus On Different Pages?

Turn on the Shortcode

In order to show different menu’s on different pages you will need to make sure you have enabled the Use Shortcode? option from inside the Responsive Menu admin, shown in the screenshot below:

Once this has been setup, you can then use any type of logic you wish to determine which menu is shown and under what conditions. The below examples show you can use an if or case statement in PHP to filter by page template or page ID, however you can use whatever functionality you wish in its place.

These can easily be added to your header.php or footer.php file just after or just before the opening/closing body tags.

Using an if statement based on page template

<?php if(get_page_template() == ‘full-page.php’) echo do_shortcode(‘[responsive_menu menu_to_use=”full-page-menu”]’); else echo do_shortcode(‘[responsive_menu]’); ?>

Using a switch statement based on page ID

<?php switch(get_the_ID()) : case 45 : $rm = ‘first-menu’; break; case 52 : $rm = ‘second-menu’; break; case 75 : $rm = ‘third-menu’; break; default : $rm = ”; endswitch; echo do_shortcode(‘[responsive_menu menu_to_use=”‘ . $rm . ‘”]’); ?>

On this page you will find valid values for the shortcode option above and more example uses including menus for different languages and logged in users.

How Do I Hide The Original Menu?

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
  • CSS of Menu To Hide

Menu Breakpoint

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.

CSS of 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.

How Do I Find The CSS of My Menu?

One common question I get asked alot is how to find the correct information to put in the “CSS of Menu To Hide” option box inside the Responsive Menu admin options page.

This is one of the most important options when first installing the plugin as it means you won’t have both the Responsive Menu and your original menu showing on smaller screens.

Class or ID

Before we start, you will need to know a little bit of CSS to know what you are looking for and how they work. When you inspect an element (or look at the source code of a site) you will notice that there are alot of reference to things such as id=”menu” or class=”menu”.

To keep this as brief as possible, ID’s MUST be unique on a page (you can’t have more than one element with id=”menu” on), whereas you can have unlimited elements with the same class. Also, IDs take higher precedence over classes in stylesheets and without trying to get too technical classes have a specificity score of 10 and IDs a score of 100. The only thing that “beats” an ID is an inline style with a score of 1000 (horrible little things).

The most important thing you need to know, however is that class names in CSS start with a dot(.) and IDs with a hash(#), meaning in our example above, to target an element with an ID of “menu” and a class of “menu” you could do it in either way as follows:


#menu { }


.menu { }

Ok – that’s great, but how do I find the relevant ID or class for my menu?

Glad you asked, below are a selection of the 3 most popular browsers and how to find the specific Menu CSS ID or Class that you need (we will be using this very site as our example).

To be honest however, they are pretty much all the same process so once you know how to do it one browser you can do it in them all.

Finding the Class or ID name

1. Navigate to your page and Press “F12” to bring up the element inspector
2. Click the magnifying glass icon in the far top left as below:


3. Move the mouse around the page until your current menu becomes highlighted, as below:


4. Click once highlighted, and then look at the source code that has been highlighted in the bottom element inspector:


As you can see from the image above, my menu has an id of “menu”, so all I need to do is put “#menu” (remember we use a hash symbol for IDs) in my “Css of Menu to Hide” option and save.

Alternatively to using the magnifying glass around the page, you can simply hover your mouse over the source code in the bottom section and it will highlight the different sections automatically, either way will give you the same results.

Of course if you have any questions on the above then please let me know!

How do I find my JavaScript console errors?

Finding JavaScript errors

Often we have found that the Responsive Menu plugin will not respond to clicks on the menu button itself because a piece of custom coded JavaScript or JavaScript added by another plugin or your theme is causing errors.

If there is a fatal JavaScript error on your page then it will kill any more JavaScript from loading and working on the page meaning that the Responsive Menu functionality will be killed by the offending JavaScript.

The good news is that it is very easy to find these errors (although fixing them is not always so straight forward).

Almost every major browser provides users with a set of Web Developer Tools that can be used for debugging CSS, HTML and JavaScript among other things. To bring up the Web Developer Tools in most browsers all you need to do is hit the F12 key, which will bring up a screen at the bottom of your browser that will look similar to the below:

Firefox Developer Tools

As you will see we are currently in 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.

For our purposes here however, we are interested in the tab labelled Console. This is used for developers for JavaScript debugging so is perfect for us. Please note that sometimes the Developer Tools need to have the Console tab selected before loading the page for all JavaScript logs to show up, so first up, hit the Console tab and reload the page. If there are any errors it will look something like the below:

Firebug Console Errors

In this example we can see that we have some errors that need fixing (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.

Unfortunately, fixing these errors is different every time and is out of the scope of plugin support so I can’t offer any guidance on fixing the actual errors but at least you now know where to look and how to determine if you even have any JavaScript errors after all.

How do I Build a Menu Like the Responsive Menu Website?

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

The first step is a simple one, all you need to do is navigate to the Header Bar tab from the plugin options and ensure that the Enabled option is turned on under the Initial Setup header as below:

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

Next, you need to navigate to the Desktop Menu tab and make sure that this has been turned on, which should look like the below:

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

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 Setup tab and on this site, it looks like the below (set at 1000px wide):

Step Four

The last step involves getting the desktop menu to fit inside our header bar.

The trick here is to match the Positioning option under the General Setup header of the Desktop Menu tab with the positioning of our Positioning option in the Header Bar section. 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 Side option accordingly. I also don’t need a fixed width for the menu so I have left it blank so it takes an automatic width. You can select different options here, but the setup for this site can be seen below: