Responsive Menu Module for Joomla

TheGrue Menu is a free responsive menu module for Joomla that allows you to create stunning, colorful menus on your website. This menu module has been tested on all major web browsers and mobile devices to make sure that your website will look professional to anyone who visit it. The module comes with lots of in-built features like custom color choice for menu background and links, 20 different font styles to choose from, option to have rounded or straight corners. Want a unique styled menu with extreme color combinations? TheGrue Menu module is what you are looking for.

Compatible with Joomla: 2.5, 3.x

To use this free module, you have to download it first and install it to your Joomla site. After installation go to Extensions > Module Manager, find the module TheGrue Menu and start setting it up.

The setup is very easy, here is a screenshot of the available parameters:

responsive menu module parameters

The module allows you to have multiple levels of menus with dorp-down animation and fully customize it for your design needs. You can change background and link colors for main and sub menus and also can choose from the most popular font styles from Google font directory.

By default the menu has rounded corners of 3 pixels, this can be increased or can set to 0 (zero) to deactivate.

The jQuery library is deactivated by default, because most of Joomla templates and Joomla 3.x system already has jQuery integrated. Loading this library multiple times it will cause javascript conflicts, stopping jquery plugins to work. So make sure that jQuery is loaded only once on your website.

Note: we tested this module with several templates, to make sure it works perfectly. However there are cases when the template styling overrides the module styling and could break the design of the module. To be sure that the module is not overlapping with any design element of your template, create a new module position, dedicated to this module.

TheGrue Menu Update

August 27, 2016

Minor changes to fix jQuery conflict when touchWipe is disabled. Thanks to Marcus and other users who reported this problem!

September 14, 2015

screen max width gruemenu

Have updated the module with a new feature: now you can set the maximum screen size for the mobile menu. The GrueMenu will switch to mobile once the screen size is equal or less then the set value.

August 22, 2015

As few user reported some bugs with the menu when using iOS and Android devices, I have implemented some minor changes to it to fix these bugs.

Also implemented the “touchwipe” library, so now the menu can be called on touching devices by sliding your finger from left to right. Sliding it in the off direction will hide the menu.

Fixed rendering of “Hamburger menu”, instead of making the small lines with borders, I changed that to 3 different span elements. As usual, if you find more bugs, please submit your observations bellow in the comments. Thanks!

July 30, 2015

I’m happy to announce that our responsive menu module has been updated, and comes with lots of great and new features that will make your job easier to add customized menu to your Joomla project.

fly out, slide up, rtl support menu, responsive mobile menu joomla

The new version comes with a brand new responsive menu. As in the previous version the responsive menu was sliding down, the new mobile menu will slide in from the left when pressing the toggle button. I have also included the option to change the font size from module parameters, for both first level and sub-level menus; the Google fonts can now be included by typing in the name of the font style in the appropriate field in this format: Open+Sans+Condensed:300

There are however other big changes to the menu module, such as choice for menu directions. At this moment the menu animation is set to fade, and this can be only changed manually in the Javascript file, but will include the option later on to be able to set this as well from the module parameters.

Now it is possible to have multiple Grue menus on the same page, each having different font family, size, colors and layouts.

Drop-Down Menu

This is the usual drop-down menu style, with the horizontal layout. You can activate the fixed option to this menu, that will make the menu fixed to the screen while scrolling to the bottom of the page. This option can make the website navigation much easier if you have long content.

Slide-Up Menu

This layout can be used for footer areas, where you want your menu to be floating from bottom to the top.

Fly out menu

The fly-out menu layout, is straight forward, will show sub-menus on mouse hover fading in from left to right. It is ideal to publish this layout in the left sidebar of your template.

Slide from right to left – RTL Menu

This menu layout it may be ideal for website that requires RTL support.


I do recommend using the Fixed Menu option only with the drop-down layout, because the other layouts may not work just properly in fixed mode. If you are using multiple menus, I recommend enabling the Mobile Menu option only on one of them, probably for the main menu, just because the toggle buttons will overlap and menus will be unusable this way.

If you find any bug or have ideas how to improve this module, please leave a comment on this page.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponShare on LinkedIn

This article has 147 comments

  1. Saro Cardona Reply

    very nice module-menu.
    I’m using Joomla! 3.3.3 stable with the Protostar template and I discovered 2 issue:
    1. the drop-down sub-menu hidden behind others menu voice when you resize the page before it reach the nested navigation style;
    2. in the module manager selecting the option to hide menu title, don’t work and it will always show it. To make a workaround I wrote as title the special character for the space= 

    Here some nice ideas to improve this module adding some parameters like:
    1. choosing the size of the font.
    2. choosing the name of a font by writing it.
    3. choose the padding of the main-menu.
    4. change the fixed sub-menu length into automatic-length in according to the max name-menu element length and apply this criteria for each sub-menu.
    5. resizing the page before it reach the nested navigation style, on a voice of the menu with more then 1 sub-menu that is close to the margin right of the browser, the second sub-menu will not be completely visible going out of the margin and that happen because the module have sub-menu direction set by default to the right-side; it could be nice if the module check if there is enough the space before show the menu and if not change automatic the sub-menu direction.
    6. on the nested navigation style it could be nice to see all the main name voices highlighted and add more padding on each sub-menu to see better the nested of each sub-menu.

    Thank you for all your works and I hope you will find my observations useful.
    Best Regards,
    Saro Cardona

  2. lester Reply

    Hello, and thank you for the wonderful Grue menu. I am having difficulty changing the text color to white on the grue menu. All of the options in grue menu module allow for changes to the color of the menu, etc., but not the actual color of the text. I’ve also searched for “gruemenu.grue” in the files and only see that is located in default.php file but there doesn’t seem to be a method there to change the color to white.

  3. lester Reply

    Never mind — I found out how to change the first level text color.


  4. prbfun Reply

    Thanks for a very nice menu extension…. just what I was looking for 🙂

  5. Dietmar Bothe Reply

    I upgraded to Joomla!3.4.3. TGM works on PC, but not on Smartphone.
    Any idea?


  6. Dietmar Bothe Reply

    sorry, it still works, but different.
    😉 Dietmar

  7. Foodstyling Reply

    After upgrading to 3.4.3 on a multilingual site the menu stopped working for french language category. I switched back to 3.4.2. and the menu works on both languages.
    Any clues?

    • the grue
      TheGrue Reply

      I’m not sure what is causing the problem, will test the menu with the latest Joomla version in the next days. Thanks for your notice!

  8. Stefan Reply


    Thanks for the nice extension.
    But, i still do have a question about it;
    I would like to take the 1px letter-spacing to 0px… Firebug says that i could change it in the ‘styles.css’ but i hardly can’t find the correct .xml to change it.

    Could somebody explain this to me?


    • the grue
      TheGrue Reply

      Hello Stefan, the file is located in the following folder:
      Hope you can find it.

  9. frjmbad Reply


    I use Grue Menu in my website
    And i have a bug or a configuration problem

    When we browse my website on a Smartphone

    We have a plus symbol : OK and when you click on the Plus we go to the end of my website and we have the Grue Menu with nothing

    • the grue
      TheGrue Reply

      From where is the plus sign coming from? Something is wrong with the way you positioned the menu in the template. When you switch to mobile view the menu appears at the bottom of the page and the plus sign is scrolling to the menu. I think the menu module is conflicting with the template, this is why you are seeing this strange behavior. If you really want to use this menu, I suggest to try out with another template and see if you get the same problem.
      Don’t think it is any problem with the menu configuration but rather with the how the template works.

      • frjmbad Reply

        When I use another Menu Module, it’s OK

        But I prefere The Grue Module

        Can you help me ?

        • the grue
          TheGrue Reply

          I will take a more closer look to your website later on and will try to find a solution for you.

  10. Lorena Reply

    Thnks for the Menu Module, it’s so good!
    I would like to know if I can change Menu Background for transparet, I mean, not color?
    Thank you and I looking forward for your reply.

    • the grue
      TheGrue Reply

      This is not possible at the moment, however I will consider including an option that allows you to opt for transparent background menu.

      • josé Reply


        There is any way to make menu without color? Transparent?
        Like changing css code somewhere?

        Please help me

        • the grue
          TheGrue Reply

          At this time it is not possible to make the menu transparent. Will find a way to include this feature as well.

  11. Olive Reply

    Please help i added the menu module and wanted the sub menu to fly out to the right but am only have them dropping downwards how can i make them fly out to the right

    • the grue
      TheGrue Reply

      Current version of the module does not support fly-out, but will include this possibility in the next version.

  12. randy Reply

    Why is Gruemenu not rendering ampersands, but instead showing the string? The destop menu (not Gruemenu) shows the ampersand.

    • the grue
      TheGrue Reply

      Probably this is caused by a jQuery conflict. Check the other active modules/template and make sure you load the jQuery library only once per page!

      • randy Reply

        Thanks for the reply. The site is now live. Gruemenu only appears at the smartphone size. Is it conflicting with the Maximenu CK menu installed?

        • the grue
          TheGrue Reply

          Your template is using the Gantry framework, and the GrueMenu is placed into a responsive div, which by default is set to be not displayed on certain screen sizes:
          div.rt-block.responsive {display:none}
          You can set this to display:block, but this option may mess up the layout of your template, or you can change the div name in which the modules is published.

  13. Dany Reply

    Is there any way I can disable the sidebar? I liked more the older slidedown jquery. Ty for this awesome module 😀

    • the grue
      TheGrue Reply

      I may include an option that allows you to choose to have a slide-in or drop-down responsive menu.

      • Muzzafar Reply

        Oh yes, I like the old drop down too… Will only install the new one when there is option to choose the slide or drop down. This module is awesome and wonderful. Than you, thank you and thank you.

    • the grue
      TheGrue Reply

      Just download the new version and reinstall. If you made modifications to the old version, make a backup before upgrading.

  14. Frank Reply

    Is it possible to set up this menu similar to a bootstrap menu, where you will only see the sub-menus when you click the parent menu. Thanks for the great module by the way.

    • the grue
      TheGrue Reply

      Sorry, but this menu does not has that bootstrap function you are asking about.

  15. Oli Reply

    The Hamburger-Menu in mobile view is not showing correct in Chrome and Firefox on Android 4.4
    In Chrome the 3 lines are missing and in Firefox it is one big white square. On PC everything looks fine. How can I fix this?

    • the grue
      TheGrue Reply

      I had not possibility to try the module on Android device, however I tried on iOS and it worked fine. Anyways, have updated the module and did some minor modifications to it that now should fix the problem you are having on Android. Please download the module again and let me know if it worked. Thanks for the feedback!

      • Oli Reply

        Sorry for answering so late. But I tested it on Android in Google Chrome and Firefox an now the hamburger menu looks how it should be! Thanks for your great work and support! 🙂

  16. Ayub Reply

    Just download TGM, but no option for Fixed Menu, Menu Direction, and Google Font Style. If you already publish a new version? Thank you.

    • the grue
      TheGrue Reply

      The new version includes all the features that I presented above. Please check the screenshot of the module parameters under the “Menu Update – July 30, 2015” title.

  17. Kai Reply


    Thx For the Nice work. On pc Works the menu Fine, but not on Smartphone and ipad.

    Have You Any idea? i wont Change the menu.


    • the grue
      TheGrue Reply

      I found out that the “sidr” menu has some problems rendering on iPhone and iPad, it causes some FPS problems and it slows down the page on mobile. I’m working to replace the “sidr” with other off-canvas menu and make it with CSS transition instead of jQuery. Check back in a few days for the updated version. Thanks for your great feedback!

      • Kai Reply

        Thx For the Information, but on android devices is the Same Problem. The Hamburger Menu is only transparent.

        • the grue
          TheGrue Reply

          Have you have updated the module and have cleared the cache? I will investigate further more and will ask a friend to check the module on HTC One device.

        • the grue
          TheGrue Reply

          Just checked the menu on HTC One, Android and works just like on PC.

  18. chris Reply

    Hi I am finding a conflict with the menu, when on the mobile site the menu only works on the home page and no others

    • chris Reply

      Don’t worry, all fixed. Had to move the location of the JQuery load.

      • the grue
        TheGrue Reply

        Glad you found the problem! Usually this happens if you are using other modules which loads jQuery, they conflict with each other.

  19. Manuel Miyagi Reply

    I want to thank you for the super sticky menu, really great that you have generously provided this module.

    You can place a small logo or image within the menu bar?
    How could accomplish if possible?

    Again thank you very much for your help and your nobility!


  20. Boris Reply

    Hi. Thnx for cool module!
    But I can’t edit any css file (( and also can’t change atributes. 644 is as default in css

    • the grue
      TheGrue Reply

      I’m not sure what you are talking about. Why can’t you edit the css file? Can’t find it?

      • Boris Reply

        I can find it but can’t save any changes in it. Don’t have permissions (atributes are 644), also can’t change atributes to 755. I can change any other folders or docs on my site except docs in this module.

        • the grue
          TheGrue Reply

          Probably you will need to change the attribute of the css file via SSH. This problem usually happens on VPS servers when you install modules and templates after uploading your website. The Joomla installation sets the attributes correctly, however the user is set to nobody; this is why you can’t change the file’s permission. If can’t do it with SSH, ask you hosting provider, they might help you with this. It is not a problem with the module, but it is a server configuration issue.

  21. Wim Reply

    Nice module, working without problem.

    How can I change the background-color of hover/active to FULL-WIDTH of the menu (instead of variable width depending on the length of the menu-item)?

    • the grue
      TheGrue Reply

      If you could illustrate your request with an image, that would be awesome. Don’t know what specific customization you want.

      • Wim Reply

        I could fix it myself, by changing the menu-direction from “top to bottom” to “left to right”. Then, the active item has a full-width-background color.

        Suppose I want the active item has a thick left-border (main background color) and is right-aligned, how can I change the css?
        (I cannot attach an image to this post, how do I send you an image?)

        • the grue
          TheGrue Reply

          Upload the image to a free image sharing website and send the url to via comment.

          • the grue

            I usually not provide free support for custom modifications of the module, but I will make an exception with you.
            To achieve the results you want here is what you have to edit the styles.css file and change the following codes:
            #gruemenu > ul > li:hover > a, #gruemenu > ul > li > a:hover, #gruemenu > ul > > a {
            border-left: 6px solid #192F4D;
            text-align: right;
            Please not, that if you make this modification, all GrueMenus on your site will have this effect, including drop-down.

  22. Danni Reply

    Hi, thank you for a great menu!

    There is just one problem, and it is that blind people cannot access the dropdown-menus. I have tried with the most used screen-readers, and it doesn’t work. You would be a hero if you fixed that.

    Again, thanks!

    • the grue
      TheGrue Reply

      This is a great suggestion, will try to integrate this feature in the next update. Thanks for the feedback!

  23. Don (Germany) Reply

    Thanks for this perfect responsive Menu!
    I have only one Question, how can I switch off (Scripting) the WIPE EFFECT on mobilephones in responive mode?!
    Thanks for answering!

    • the grue
      TheGrue Reply

      Scripting can not be switched off in the online view, because the mobile version of the menu is based on jQuery. You can deactivate the mobile menu however, if you wish so.

  24. CK Reply


    got a problem with the menu and JoomGallery: When I open the Joom-Gallery thumbnail, it pops out the original picture (as it should). But “The Grue” is still in the foreground, which means: The menues are right across the picture. Any chance to tell the menues to fade into the background?

    Thanks a lot for Your help!

    Best Regards

    • the grue
      TheGrue Reply

      Hi! TheGrue menu has a z-index of 999999, while the Jooml-gallery overlay is only 9999. To fix this problem, you can change the z-index of the thumbnail overlay or the menu.
      To change the menu z-index you will have edit the css file (root_joomla_installation/modules/mod_gruemenu/css/styles.css) and at line 5 decrease the z-index to 9999.
      Hope this helps!

  25. Rich Reply


    I love the menu, very simple and easy to configure. I want to have an all white background menu. Is there someplace in the files where the padding can be changed to 0px or the color possibly be changed to white?

    Would it be possible for the submenu to have the css shading border with rounded edged for a more crisp look? Unless the rounded edges controls both the main and sub menu, but I haven’t tried that yet … lol



    • the grue
      TheGrue Reply

      You should try the menu first. The menu can be customized as you need it: some part can be changed from the module parameters while other part can only be styled via the CSS file.

  26. Johannes Reply

    Great module so far! But like some other people wrote above the mobile menu works not on my iPhone (on PC works fine). How can I fix that issue? I downloaded the version yesterday. Any suggestions? I don’t know, if some JQuery is loaded with my Joomla-Template and I also don’t know, how to find out. Maybe this is a JQuery conflict?

    • the grue
      TheGrue Reply

      If your website works fine on desktop, than it is not a jQuery conflict. What iPhone version are you using to test the menu?
      It has been some problems with the module couple weeks ago, but I have updated it and worked fine. Can you please send me your website’s URL is it is online already?

      • Johannes Reply

        Hello Grue,

        Okay. No conflict, hmm… the site is not online and currently in development. I’ve sent your login data via contact form.

        iPhone version is 8.4.1.

        • the grue
          TheGrue Reply

          Have checked out your email and I just found out that there are some Javascript errors on your site. Those are related to the Gantry framework.
          If you check out the demo of the menu with your iPhone, you will see that it works perfectly, so the menu has no problem, but some other scripts are causing issues that will stop the menu working on apple device.
          It could also be the problem, that you are not using the latest version of the module.

          • Johannes

            You are right… Thank you for checking. This is indeed a template based problem. I installed Grue Menu on another site and all works well. Due to playing and messing hard around with several modules, components and plugins something seems to be broken and causes now Java script errors. Normally Gantry framework runs very stable… Thank you very much again for your time 🙂

  27. Galbito Reply

    Good Morning,

    I have a simple problem … but we’m able to afford it and I doubt if the problem is my template.
    I am not able to center the menu. Ma to right or left is. But I want to put focused and I can not ..

    • the grue
      TheGrue Reply

      To align the GrueMenu to the center add the following codes to the CSS file:

      #gruemenu ul { text-align:center!important}
      #gruemenu ul li { float:none!important}

      • galbito Reply

        thank you. By testing I managed to do with:

        #gruemenu ul {
          float: left;
          position: relative;
          left: 50%;

        #gruemenu li {
          float: left;
          position: relative;
          right: 50%;

        but not that code is more effective.

        I would really like “abuse” of your kindness to comment otherwise. I want to change when the menu switches to the desktop web version. I have seen changes when reaches 720px, but I need to 1060px. The change in the CSS, when it comes to 1060px shown me two menus, and even the menu does not disappear 720px, and not know because it is.

        • the grue
          TheGrue Reply

          Have just updated the menu and have included a new parameter where you ca now easily change the screen size you want the mobile menu to be activated. Here is the new feature. Download and install the module again, however backup your modifications, because with a new installation will overwrite the old files.

          • Galbito

            thank you. Now I test. The only change that was made was to center it and already know how.

            I said, thank you very much !!!

  28. Kesiena Reply

    Thank you for this beautiful module. It is really everything I needed.
    I use the grue menu solely for the mobile menu on my site. It works perfectly, the only problem I noticed is that while scrolling on a page using a mobile device(android), the menu slides out from time to time (without clicking on the toggle bar).
    I also found the same issue on the demo site.
    Please advise on how to fix this issue.
    Thank You

  29. Kesiena Reply

    The issue I mentioned above about the menu flying out unexpectedly without touching the Toggle bar on Mobile devices (android) seems to only happen on the android Google Chrome browser.

    • the grue
      TheGrue Reply

      The menu has Touchwipe jQuery Plugin, that may cause this “strange” behavior. Touchwipe allows the user to call the menu just sliding the finger from left to right.
      I’m not 100% sure if this is what you are experiencing.

      • Kesiena Reply

        Sorry for the double posting. I thought my first message did not post or was deleted after moderation. Yes, I feel this might be the issue. Probably this plugin is incompatible with google chrome for android?
        Is it possible to disable the plugin?So that the menu is only activated on clicking the toggle bar.
        Thank You

  30. Helmy Reply

    Thank you for this easy to use and beautiful menu!

    I also noticed the same problem as Kesiena that while scrolling on a page on a iphone5, the menu slides out quite regular without clicking on the toggle bar.

    And is it somehow possible to move the navigation toggle on mobile device from the left side to the right side?
    I tried with overwriting the style in the css but didn’t achieve what I want.
    Thanks for your help in advance!

    • the grue
      TheGrue Reply

      Will include this option in the next update. You will be able to choose in which corner of the screen to show the hamburger menu.
      I have tested the menu on apple as well on android device. It is fact that if you are moving your finger from left to top and not from bottom to top, the menu will pop in. So your scrolling technique have to be perfect 🙂
      Anyways if you don’t like this feature, just deactivate it from the module control panel. If you are using an older version, just reinstall the module. It has been updated yesterday.

  31. Helmy Reply

    okay I understand! It’s a feature:) I installed the latest package and disabled it but unfortunately menu does not show up on mobile at all…

    • the grue
      TheGrue Reply

      You mean, that the small hamburger menu does not show up on mobile at all? Then activate the mobile-menu function in the back-end.

    • the grue
      TheGrue Reply

      By default the menu is top-to-bottom and the RTL is turned off. Don’t get what you want.

  32. Ronny Reply

    On the home page I have the module “News Show Pro GK5” integrated , there I see , although the normal menu but the menu button in the mobile portal has no function . But on all other sides it works great 🙂 .

    I ‘ve looked at the inspector in Firefox, there the menu is not created after the Footer.

    • the grue
      TheGrue Reply

      Your page contain a javascript error. Probably because you are loading two different Javascript libraries. Most likely the mentioned module is loading the jQuery v1.7.2 version. Deactivate it!

  33. Ronny Reply

    Thank you!!! This is not noticed but now everything is going great !

    I am absolutely satisfied but an accordion feature for submenus would be great 😉 .

  34. Oriol Reply

    I’d like to disable the “touchwipe” library, the menu can be called on touching devices by sliding your finger from left to right. Is it possible? Thanks!

    • the grue
      TheGrue Reply

      In the new version of the module you can disable the touchwipe function from the module parameters. Update the module, but if you made any changes to it, make a backup first.

  35. Yolanda Reply

    Hi, Thanks for the module.

    Is it possible to use a background image instead of a color? I use your template Blue point. I would like to keep the nice blue menu of that template.

    • the grue
      TheGrue Reply

      At this time there is no possibility to add an image to the menu from the parameters, unless you modify the css.

  36. Yolanda Reply


    installed your module because the blue point template has an issue with the ipad in portret mode. Unfortunately this module also has an issue. The menu will not be shown in ipad portret mode (Safari)

    I hope you have a solution for this problem.


    • the grue
      TheGrue Reply

      The module has a parameter, where you can set the screen width from which the mobile menu will be shown. From default the screen is set to 720 pixels and the iPad portrait view width is 768px. So you should change this settings from the parametrs.

  37. Gregory Reply

    Thanks for this great module. This is exactly what I was looking for. This is the best responsive menu for Joomla that I found on the web. Thanks for providing and supporting it for free!

  38. Yolanda Reply

    Thank you very much. It works now. Hope it will be possible soon to add a picture to menu background.

  39. Don Reply

    Great menu module and templates. Would like to use both with my web site.
    Using Virtuemart 3.0.10 with Joomla 3.4.4
    Have a conflict that I can’t resolve.

    When ever a virtuemart call is in action such as selecting the “Order” menu option or any of its sub menu items the 2 drop down menu options no longer display beyond the position boundary box. This happens in every template I have tried. If I select a non Virtuemart menu option the drop downs work again.
    I have jQuery disabled in both menus but touchswipe enabled in both to get the hamburger box to show when making the screen narrow. This issue is the same on Firefox, Chrome and IE. The hamburger option does work however with any Virtuemart selection.
    I am not a programmer so would really appreciate some help.

    Thank you

    • the grue
      TheGrue Reply

      The virtuemart extension causing some conflicts with the menu. I will investigate this problem by testing the menu with virtuemart.
      I would suggest activating/deactivating jQuery in the module parameters to see if that fixes the problem.

      • Don Reply

        Thanks for investigating the virtuemart conflict.

        I have tried enabling and disabling jQuery in both menus. I have also tried disabling it in Virtuemart and TheGrue menu in various combinations.

        I have now placed both menus in the User1 position of the Blue-Lotus template which makes it easier to see how the menu is truncated as soon as any virtuemart menu option is selected. It looks to me like the menu should load after the virtuemart page data is sent to the screen but is loading before and then covered up by the loading of the virtuemart data. I have the virtuemart preferences set to use the Blue-Lotus template.

        Best regards

  40. massimiliano Reply

    Hi, can you add virtuemart option ?..

    Actually only i can select “Select menu” but i no use ab menu for virtuemart …

  41. David Elf Reply

    Huge thanks for this module, it really has some potential.

    I didn’t want to fetch my menu font from Google. So I figured the best way is to enter the font name in ‘Google Font Style” box in module settings. And comment out the line ‘$doc->addStyleSheet’ in ‘/modules/mod_gruemenu/tmpl/default.php’. This seems to prevent it from connecting to

    The other thing is that without ‘touchWipe’ enabled mobile support is out the window. But with ‘touchWipe’ enabled, I think that the menu pops up by accident too easily.

    Also disabling it in the module settings gives this error when you load the page:

    TypeError: $(…).touchwipe is not a function

    to which as a solution I’ve commented out all the ‘Touch Events’ lines from ‘/modules/mod_gruemenu/js/script.js’.

  42. Jan van Breugel Reply

    Hello TheGrue,

    I want to use your menu. It looks great, but i have some problems. I have the menu fixed at the top. When i enter a page i see the menu. When i scroll down, the menu disappears. After a few lines scrolling down the menu appears again, but it covers the whole screen. How can i solve that problem?
    All i want is that the menu will stay on top of the page. So when i scroll down the menu is still visible.



  43. dony Reply


    Thanks we can use your menu module.
    can you explain how to set up for mobile.
    Because after installation in published the menu doesn’t appear in android mobile browser both in chrome.


    • the grue
      TheGrue Reply

      Just checked your website and it looks there is jQuery conflict on the page. Probably this is causing the problem with the menu.

  44. Don Reply


    Any luck with finding the conflict with Virtuemart and how to resolve? Would like to go live with your menu and template and get our non profit group dreamgreen cleanoceans up and running.

    Many thanks

  45. The Key of X Reply

    I think I am going to like grue menu. Is there any possibility that the menu can stay fixed without it filling the screen from left to right. OK say my website is using a container which is 950px or 946px or even 800px and when I scroll down under can the menu width not exceed my container so that it will maintain to the size of the container and must be at center?

    Some poster asking if old style drop down menu. Yes that is also good. But if drop down menu is to materialise, there is no problem if it stay fixed from left to right filling the screen because I prefer people look at my web viewing it potraitly.. not landscapely.. ooo sorry my bad English but hopefuly u can understand.

    • the grue
      TheGrue Reply

      I got your point. Because so many users are constantly asking for the drop-down style, I will include this as well in the next update. So users will be able to choose between slide in from left to right or slide down menu style.

  46. Wayan Reply

    Hi there 🙂

    what a great menu – but can somebody tell me why the last-child property doesn’t get set? The right corners of the last menu item are never rounded 🙁

    Greetings, Wayan!

    • the grue
      TheGrue Reply

      The last child in the main row? That is a missing CSS style. Will include this fix in the next update.

  47. ikram Reply

    first of all really appreciate this free stunning menu.
    i am facing a issue related to mobile view. sometime without touching the Toggle bar.. menu appear during scrolling. could you please check why this happening
    i am using android phone with chrome browser
    Thanks & Regards

    • the grue
      TheGrue Reply

      This problem has been reported by other users as well. It is caused by the touch-swipe jQuery plugin. Just disable this feature in the module parameters and it wont happen again.

      • ikram Reply

        i disable touch-swipe feature from backend, but now mobile menu not working.. any other solution.

  48. Emran Reply

    Hi! TheGrue

    First of all thanks for your cool module I liked.
    My website language is persian and I want a menu from right to left.
    In setting I select that option (Right-to-left) but it appear from up to down.
    And also would you please tell me how I can upload captured image.


    • the grue
      TheGrue Reply

      The right-to-left menu is only available in vertical menu option. It is not implemented yet in the horizontal view. I will consider adding an option to switch the menu to RTL for all views, in the next update.
      There has been many request of additional features, but I did not had the time yet to implement yet. Hopefully an update will come this month, so stay tuned!

  49. John Reply


    The touchWipe functionality is great, but we’ve found it to be just a touch too sensitive. Changing the min_move_x value in touchWipe.min.js to 90 seems to give a much better user experience on high DPI touchscreens like the Nexus 5X or the iPhone 6. Reading through the comments, this is probably going to be quite a useful thing for other users to tweak. Find the touchWipe.min.js at


    on your site.


    • bloodysweetness Reply

      Oh my goodness thank you so much! This was driving me batty (like, looking-for-another-module batty! and now it works GREAT!

    • Marcus Reply

      That´s it.
      Thank you very much for the solution.
      Tested it on a Samsung s6 and it works very good.


  50. Emma Reply

    Hello,when I used the TheGrue Menu,I found the Start Level was fixed to 1, which cannot be changed to other start level. Is it possible to adjust the start level to any other level?


  51. Vorda Reply

    How i can centered this menu? Easy way pls.

    Ty in advance.

  52. Oliver Reply

    Hi, great module.

    I have a problem with the hamburger button on mobiles. I activated the mobile menu and the hamburger button appears when I shrink the firefox browser on my PC. But when I switch to my mobiles (Android tablet and SmartPhone) I can’t see the hamburger. No matter if I use Chrome or Firefox. I use TGM with the standard protostar template.

    Any idea?

  53. mal2moh Reply

    i used joomla 3.5.1 and tab setting on module not show,can not publish on any page or menu.

    • the grue
      TheGrue Reply

      You are doing something wrong. The menu works on latest Joomla version, just tested it recently on 3.6.2

  54. Homeedition Reply


    how i can change the “small x” to a “uppercase X” in the circle of the mobile Menu?

    Thanks 🙂

  55. Patrick Roden Reply

    On the mobile device (smaller screen), two menu buttons show, the original proto-star template menu button, along with the GRUE menu button. However both do nothing when selected. How can I fix this so that only the grue button shows and it is select-able (working as advertised)?

  56. Kelly Graves Reply

    Hello and thanks for the menu. I have 2 grue menu’s and have turned off mobile on one of them. That one however is still the menu seen in mobile views. Any idea how to fix this

  57. Mike Reply

    Hi, I have two grue menu modules on one page of my website. My problem is when I open a drop down on me menu bar, the items in the vertical menu overlap the items in the horizontal bar. Is there a way to fix this?

    • the grue
      TheGrue Reply

      The overlap can be fixed with some minor CSS codes, such as:
      .grue_150 {z-index:998!important}
      .grue_151 {z-index:999!important}
      Replace the numbers (150,151) with the module IDs and place the CSS code in your template file or in module file. I will consider adding a custom CSS field in the module parameters in the next update, so people like you can easily add CSS without needing to edit the actual files.

  58. Marcus Reply

    first of all. Great module. Thank you very much. Good job.
    At the moment I have one problem with the touchwipe.
    When I turn it off, my whole jquery script didn´t work.
    So, there must be an issue.
    I want to turn it off, because it´s open every time, when I touch and scroll on my smarthphone / android / Firefox.

    So, is there a solution for it?

    • the grue
      TheGrue Reply

      The touchwipe still has some issues on some devices. I can’t do much about, because that is not developed by my. I will check if there is any update on this plugin and will test if there are any improvements or other alternatives to it. Regarding your jQuery problem, it was an javascript conflict with the touchwipe off, but it has been fixed. Please download the new version!

  59. Arttu Reply


    I have been building a new website using your menu module but for somereason when i use plugins/modules to display pop up pictures the navigation bar stays in the way of the opened picture. Do you have any sugestions why that is and how can i fix this.

    • the grue
      TheGrue Reply

      Just tested it and works fin on Joomla 3.6.1 and 3.6.2 version too! Are you getting any error or why you are saying it is not working?

  60. Sir Burnman Reply

    I was having some issues with modifying a module and I came across this one. Installed it and I was amazed. Just what I needed.

  61. Domenico Reply

    I have problems activating sub menus on touch devices like tablets.
    Usually the sub menu is activated onhover.
    Is it possibile to activate it on click ?


    • the grue
      TheGrue Reply

      This feature is not implemented in the menu. I might consider adding an option for this, but for now I can’t estimate a date when this is getting to be implemented.

Leave a Comment

Your email address will not be published. Required fields are marked *