admin

Forum Replies Created

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • in reply to: Installing the Plugin #69176
    adminadmin
    Keymaster

    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.zip under the Products section.

    Once you click the link, it will start to download a zip file called responsive-menu-pro.zip, select the Save File option 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 New on the menu options once hovered over.
    • Click the Upload Plugin button.
    • On the next page, click either of the 2 Browse buttons.
    • 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.

    in reply to: Creating a Header Bar #69174
    adminadmin
    Keymaster

    Placeholder. Coming Soon

    in reply to: Hiding the Menu on Specific Pages #69172
    adminadmin
    Keymaster

    As of version 3.1.21, released on 19th May 2019 there is now the Excluded Pages option which can be found under the Advanced tab.

    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 Update Options.

    No more messing around with shortcodes or Custom CSS!

    in reply to: Setup a Desktop Menu #69170
    adminadmin
    Keymaster

    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 Bar tab from the plugin options and ensure that the Enabled option is turned on under the Initial Setup header.

    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 Menu tab 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 Setup tab 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 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.

    in reply to: Using as your Main Menu #69168
    adminadmin
    Keymaster

    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.

    in reply to: Hide the Theme Menu #69166
    adminadmin
    Keymaster

    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

    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.

    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.

    in reply to: Menu Not Showing #69164
    adminadmin
    Keymaster

    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.

    in reply to: Finding Console Errors #69162
    adminadmin
    Keymaster

    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

    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.

    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

    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.

    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.

    in reply to: License Activation Issues #69160
    adminadmin
    Keymaster

    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.

    in reply to: Using Font Icons #69158
    adminadmin
    Keymaster

    Introduction

    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.

    FontAwesome guide

    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:

    Responsive Menu Font Icon Search

    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:

    Individual Font Icon Information

    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:

    FAQ Font Icon

    As you can see all we have done is select the Menu Item About, put question-circle inside the Icon column (remember the fa-prefix is not needed) and selected FontAwesome Strong (fas) from the Type drop-down selection.

    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:

    FAQ Icon on Menu

    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:

    Admin all Icons

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

    Menu all Icons

    I hope you agree with us that this is much more appealing and only took about 2 minutes work to setup!

    Animations

    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

    GlyphIcons

    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:

    Available GlyphIcons

    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:

    Custom

    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!

    in reply to: Using the Shortcode #69142
    adminadmin
    Keymaster

    The menu will work straight out of the box as soon as it has been activated as long as the wp_head() and wp_footer() calls are found in your header.php and footer.php files respectively.

    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 Advanced tab, under the Technical section, called Use Shortcode?

    Shortcode Options

    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_to_use option above.
    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] or [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 header.php or footer.php file, 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!

Viewing 11 posts - 1 through 11 (of 11 total)