Installation & Setup

There are no articles

Content Editing

There are no articles


Customization

There are no articles

How To

There are no articles


Latest FAQ

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:

ID

#menu { }

Class

.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:

element-inspector

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

select-menu

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

class-selected

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!