Menu: Hover dropdowns + parent links + mobile friendly

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.


the following pieces of code change the default behaviour of the Customizr theme menu :

1 displays the dropdown items on hover instead of click

2 enables the click on a parent menu item

It is composed of two parts that work together : a css snippet and a php snippet.


Where to copy/paste this code? For the CSS, the simpliest way is to use the Custom CSS section of the customizer option screen. For the PHP part, copy the code in your functions.php file. It is strongly recommended to create a child theme. Everything you need to know about child theme with Customizr here.


Demo: This mod doesn’t affect the menu color, it will change according to your selected Customizr skin.

Put this in your child theme’s CSS (custom CSS panel or style.css):

Add this in your child theme’s functions.php:

Note: functions.php and style.css are the only files in a child theme that SHOULD NOT BE modified copies of their parent theme counterparts. If unsure, please read about how to create a child theme.

Related Snippets you may also like

50 thoughts on “Menu: Hover dropdowns + parent links + mobile friendly

  • Menaka S

    Add this to your child theme’s style.css for (a)

  • Ravi

    Hello, my website URL is Is it possible to customize the drop down menu to remove, (a) white colored small triangle that appears on top left of the drop down menu, and (b) the forward movement of text on hovering over any item in the drop-down? Any help would be greatly appreciated. Thanks, Ravi.

  • Robert

    Hi, Firstly thanks for a great theme and support through this site, I have managed to use some other snippets using Customizr 3.2.15 and a child theme however I cannot get this one to work. I don’t have any other responsive plugins and have run out of ideas, does this still work with 3.2.15 or are some modifications required?

    Cheers, Robert

    • Nicolas

      Hi Robert,
      This snippet has been written quite a long time ago (from a web perspective…:) ) and the features and code provided may not be useful. Many improvements have been brought to the menu since then.
      If you are stuck, I would suggest to post a new thread in the support forum, and you’ll get help from us or other users.
      Cheers 🙂

  • Tiago

    Hello Andrei,

    First of all thank you for the snippet. It’s a great idea. Just wanted to ask how to edit both carets – the one next to the 1st level and also the caret that’s on top of the dropdown menu.

    I am editing a page using MAMP

    Thanks in advance.

  • Kleber Silva

    Hello, good evening, the theme Customizr is simply fantastic, now I need help, I’m newbie with wordpress; necessary that the parent menu is not accessible (as a tab menu), How to do it? grateful

    • Andrei Post author

      I don’t understand the question. If you want an unclickable parent (a placeholder), just create a custom link in the menu editor (Settings > Menus) and leave the link blank. Than add your children to it. But how are mobile users going to access the children if the parent is not clickable? Mobiles do not have hover, remember?

  • Anders

    When I use this snippet, the sub menu indicator (aka the small upside down triangles to the left of menu name), moves into the middle of the menu name/word when said menu is selected. What alterations to the snippet should I try making?

    Any help for the newbie would be greatly appreciated!

  • Steve Enggass

    Developing on MAMP. All I am looking to do is have the Parent Menu Item linkable.
    Using JUST the PHP snippet does this. Problem for me is that the ‘carat’ icon (arrow) that was next to the Parent Menu Item, is now beneath it… Pushing everything down. Can I fix this? Same if I include all of the CSS snippet as well.

  • apostolos

    After embeding the code i new problem arised. The arrow that diasplays that a submenu exists is on the left and not on the right.
    Can someone give me a solution to this.?
    I also noted that the same is on

  • Nicola

    Hi Andrei,
    my compliments for your excellent work!

    It’s just my gut feeling but I’d love to see the caret that opens the drop-down submenus on the right of the parent link or, at least, to move the caret nearer to the parent link: I was wondering if you could give me an advice for at least one of these alternatives.

    Thank you!

  • Michel

    Hi there @Nicolas or @Andrei
    I’ve read al-trough the comments and replies and used the latest updated snippet code on the top.
    Tried the test site and that works fine on mobile with showing the subpages on click.
    But My site my site does not work on mobile with subpages.

    At least I was already helped a good way with the snippet for making the main menu pages click able,…if only the last bit for mobile
    Please help me out

  • Johanna

    I have a page in which I wish to use the top level links in the default menu, and then show the sublevel links in a sidebar widget. No dropdown menus at all.

    Why is the theme making the top level links unclickable by default? I understand the thing when there is a dropdown, but here I will not use the dropdown and only display the top level in the menu, and yet they are not clickable…

    • Andrei Post author

      The theme is not making top level menus unclickable by default. It only makes the parents unclickable. And it’s because it uses tweeter Bootstrap. It’s a well known tB incovenience and the main reason is mobile compatibility (mobiles cannot hover, hence they need to click in order to open submenus).

      However, if you only want to display a single level menu, what’s stopping you from going to WordPress menus and remove all the subpages of the parent in the menu? You have total control over your menu and can customize it anyway you want. You don’t have to respect the pages structure in the menu structure.

      After that, you may use a widget to display a list of pages, in your case the children of some parent page. Furthermore, you may use widget logic to only display that widget when on parent page or any of the children. Am I making sense?

  • chappie

    Eureka, Andrei! That works – very elegantly indeed! Thank you so much.

    On my desktop Mac in a resized Safari window, I can’t get the small screen dropdown carats to do anything by clicking or hovering. Should I be seeing the sub-menus drop down?

    I previously was using some Snippets to:
    a) get rid of the .navbar-inner shadows (ie remove the navbar box);
    b) change the default menu font, style and size;
    c) add hover+dropdown functionality plus change the colours of the dropdown menu fonts and the colour of the background
    d) change the main menu text colour and style when hovered over and when clicked.

    Obviously my old hover/dropdown Snippet is now defunct but is there any reason why the other Snippets above would be broken by your code? I’m a bit scared to add the Snippets back in for now.

    • Andrei Post author

      Having had a few people telling me the code doesn’t work I just installed and tested it on a test site. For me it works fine. And yes, most likely it will interact with other snippets that “add hover+dropdown functionality”.
      Do not use two snippets for the same thing. Most likely they will interact with one another. I also recently discovered my code is incompatible with a plugin called “Dropdown menu widget” because that plugin basically changes how some default twitter Bootstrap classes work, instead of adding its own classes and modifying those.

  • chappie

    I’m trying to post my functions.php here but my post doesn’t get published and I can see no explanation. Have I exceeded a quota?

    • chappie

      I can’t paste my custom php here: maybe I need privileges to post php but not CSS? Anyway, I will try a screen grab in case it’s obvious what I have done wrong with my child functions.php:

      With the hover/dropdown code in there, the WP Save & Publish button no longer works when I add new custom CSS snippets – and I also get a white screen issue when trying to get back to Dashboard, or into any of my site pages. Removing the hover/dropdown php code fixes these problems so there is clearly something wrong with my newbie functions.php file…which I don’t know enough to detect.

      Thanks for your help.

      • Andrei Post author

        I’m really sorry, chappie, I just noticed the solution got scrambled due to some changes in how blocks of code are published on I will update the post so all the snippets posted are displayed correctly during the next hour (I have to search for a working copy of this code).

        Thank you for your resilience in trying this, I wouldn’t have noticed the error otherwise.

        • chappie

          No worries, Andrei. You’ve no idea how happy I am that it wasn’t my fault! Thanks for fixing it – I’ll be back to try again.

          I’m also looking for Snippets to help me change the background colour, the font, the font colour, the font size, the leading (line spacing), the width and the vertical positioning of the dropdown menu! I don’t want much, do I? Should I look for a plugin? I was going to try playing with this:

          Funny how my attempts to re-post that php code were rejected by the forum Health & Safety officer. That’s one clever forum.

    • Andrei Post author

      It signifies you are overlooking some detail.

      From how you formulated the comment above, I assume you are trying to copy/paste the snippet in functions.php of your child theme and that you are using WP’s file editor for it. If you cannot save from WP file editor it means you need to change the write permissions on your child theme directory. That has nothing to do with Customizr or WordPress. It’s a setting of your server, changeable from cPanel (or Kloxo, or whatever you’re using to manage your web files).

      • chappie

        Thanks Andrei. I was trying to Save & Publish after pasting code into Custom CSS – but I must have got something wrong in this instance only as I have saved other CSS Snippets successfully. I’m obviously new to this but how does Custom CSS work when the new code is dependent on new functions.php code for it to work? Does it matter what order I do the CSS and PHP additions in? Presumably I can’t get any live feedback from the new CSS until the new PHP is in place…so do the PHP first? Either way, I got no live feedback from the new code and was not allowed to save it. I’ll give it another go over the weekend.

        • chappie

          I’ve tried this several times, slowly and carefully, and the only change I could see was that my previously delated inner navbar box and shadow were resuscitated by this Snippet. My menus remained steadfastly oblivious to the hover/dropdown instruction.

          In case some of my earlier custom CSS were conflicting somehow, I deleted all my custom CSS and started again with just this Snippet but I still couldn’t get it to work. In case it matters, my previous navbar mods were:

  • Sandro O. Fraga


    Would force the responsive mode to display the homepage as facebook application look better as a smartphone. What I have to do in code, for this to happen?

    On my smartphone the homepage is not seen in way more responsive. The homepage appears as the PC!!

    The theme Costumizr is great work!! Thank you!

    • Andrei Post author

      Well, I forgot I used it as a demo for this snippet and deleted it. I’ve just updated the link to another installation that uses the snippet.

  • Laura Hernández

    Hello Nicolas, thank you so much for your efforts and help, I have a question related to display issues when customizing the main menu. A page with subelement dosnt activated when clicking on it. You can activate the subelement linked page (in my website Why me) but not the parent page (About me). Could you help me please on this? I created a chid theme, I pasted the snippet from “Menu: Hover dropdowns + parent links + mobile friendly” but it did´nt help.
    Thank you in advance!

  • Troy


    I thought Customizr was cool, then I found this list of snippets and I’m just blown away. I’ve never seen a theme with this kind of support. I just donated $5 and I hope everybody else who visits and sees this comment does the same.

    • Andrei Post author

      I run a preg_replace() on the output of tc_menu_display() (the function that renders the menu in Customizr). This preg_replace() creates a new anchor tag around each existing caret and also moves the data-toggle and data-target attributes from the initial anchor to the newly created ones. Therefore, parent links start working, not being blocked by the data-target attribute anymore, and I provide mobile users the possibility to click the carets in order to display the submenu (mobiles need to click, they can’t hover). It’s the same principle Tweeter Bootstrap applied in version 3. Customizr uses TBs 2.3.2.

    • Andrei Post author

      Ah, sorry, I thought you ask about how this menu works.
      I will release the indicators snippet very soon. Still working on how to give a few design choices to the user and implementing it in the Customizr options, so the users can see how it looks in the Customizr options page.

  • Muditha

    It’s works really well in the laptop screen but Submenus doesn’t work on Mobile and Tab devises…
    Any help appreciated

      • JKim

        I’m seeing the same issue. Dropdown works fine at desktop size, but mobile subnavigation doesn’t expand when you click it. I copied and pasted your snippet (and double-checked). Have you made any updates to the snippet since this post? Also, if anyone has seen this issue in the forums, could you post it here?

    • Andrei Post author

      The same, but you have to do it again after each update of Customizr. If you do it in child theme, it will work after Customizr updates.

Comments are closed.