Menu: Hover dropdowns + parent links + mobile friendly 46


Hi,

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


About Andrei

I'm the designer who's been told by coders "It can't be done". So I taught myself coding and did it. Learned CSS, PHP in the process and fell in love with WordPress. Meeting Customizr really meant a lot. Not only have I found an awesome theme, but it also made me want to start giving back, in return for all the times I've been helped myself.


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

  • Reply
    Muditha

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

      • Reply
        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?

    • Reply
      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.

    • Reply
      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.

  • Reply
    Troy

    Andrei,

    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.

  • Reply
    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!

  • Reply
    Sandro O. Fraga

    Hello!

    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!

    • Reply
      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).

      • Reply
        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.

        • Reply
          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:

  • Reply
    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?

    • Reply
      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:

      http://s1008.photobucket.com/user/3785/media/public/Childfunctionsdotphp.png.html

      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.

      • Reply
        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 themesandco.com. 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.

        • Reply
          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:
          http://geek.ryanhellyer.net/products/suckerfish_css/

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

  • Reply
    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.

    • Reply
      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.

  • Reply
    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…

    • Reply
      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?

  • Reply
    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

  • Reply
    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!
    Nicola

  • Reply
    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.

  • Reply
    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!

  • Reply
    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

    • Reply
      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?

  • Reply
    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.

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">