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):
ul.nav li.dropdown > ul.dropdown-menu {
padding-top: 10px;
margin: 0;
}
.nav > li > a.a-caret {
display: block;
padding: 8px;
position: absolute;
height: 10px;
width: 10px;
top: 1px;
left: 10px;
}
.nav > li > a.a-stripped {
padding: 5px 2px 5px 38px;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 4px;
margin-left: 1px;
}
.navbar .nav > li > .dropdown-menu:before {
left: 16px;
}
.navbar .nav > li > .dropdown-menu:after {
left: 17px;
}
.navbar .navbar-inner {
box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
}
.navbar .nav > li > .dropdown-menu:before {
border-bottom: 7px solid rgba(153, 153, 153, 0.27);
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid rgba(255,255,255,.9);
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #ececec;
border-radius: 4px;
box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
}
@media (min-width: 980px) {
ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
ul.nav li.dropdown ul.dropdown-menu:hover {
display: block;
z-index: 1001;
}
}
@media (max-width: 979px) {
.nav > li > a.a-caret {
box-shadow: 0 1px 3px rgba(0,0,0,.35);
height: 12px;
width: 12px;
top: 2px;
left: 8px;
}
.nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;}
ul.nav li.dropdown.open ul.dropdown-menu {
background-color: #ececec;
border-radius: 4px;
box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
}
.dropdown-submenu > a:after {
border-left-color: transparent;
border-top-color: #ccc;
border-width: 5px 5px 0 5px;
}
.dropdown-submenu:hover > a:after {
border-top-color: #fff;
}
.dropdown-submenu:hover > a:after {
border-left-color: transparent;
}
ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu {
background-color: white;
box-shadow: inset 0 1px 4px rgba(0,0,0,.27);
display: block;
position: relative;
margin-right: 4px;
bottom: 2px;
}
ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a {
color: white;
}
}
Add this in your child theme’s functions.php:
add_filter('tc_menu_display', 'custom_menu_display');
function custom_menu_display($output) {
echo preg_replace('| class="dropdown-toggle" data-toggle="dropdown" data-target="#"(.+?)<b |', ' class="a-stripped" $1</a><a href="#" class="dropdown-toggle a-caret" data-toggle="dropdown" data-target="#"><b ', $output, -1);
}
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.
50 thoughts on “Menu: Hover dropdowns + parent links + mobile friendly”
Hi,
Add this to your child theme’s style.css for (a)
Hello, my website URL is http://www.seowebup.com. 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.
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
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 🙂
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.
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
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?
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!
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.
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 http://test.websiter.ro/
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
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
The php code of this snippet got scrambled when I edited some other part of the text. I now re-added it so it displays properly. Just in case this ever happens again, here’s a copy this snippet’s php code: custom_menu_display.txt.
Hi Andrei and Nicola,
thanks for the quick solution. It works fine!
Thanks A Million.
greetz, Michel
Snippet updated. Please let me know if there are any problems/incompatibilities with it now.
Thank you, Andrei. Your Snippet is now working perfectly for me in all respects.
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…
I did install the code on this page, no change.
And I am not using any plugins for adding dropdown/hover/whatever for menus…
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?
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.
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.
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?
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.
I’m really sorry, chappie, I just noticed the solution got scrambled due to some changes in how blocks of code are published on presscustomizr.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.
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.
I have successfully deployed the CSS Snippets below to give me most of the menu hover/dropdown functionality I need:
http://www.presscustomizr.com/snippet/sub-menu-drop-down-on-mouse-hover-twitter-bootstrap/
http://www.presscustomizr.com/snippet/change-navbar-colorsfontsize/
The icing on the cake would be the clickable parent menu item and the ability to change the menu font, font size and leading.
The code should work fine (as shown in the demo) now. So it has clickable parents.
For everything else you said you need, I believe the best way to go is to right click the elements you want in Chrome, select “inspect element” and start editing CSS “live”. When you get your result working the way you want it, just copy/paste the CSS in your child theme’s style.css. Use W3C School documentation as a guide. It’s the fastest way to learn CSS and you seem to need it.
When I copy & paste these snippets, Customiz’it! won’t let me Save & Publish. What does that signify?
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).
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.
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:
.navbar-wrapper .navbar h2 { /* Change (red) font color */ color: #d3392e; /* Change (Garamond) font family */ font-family: Helvetica; /* Change (20px) font size */ font-size: 18px; /* Change (19%) move to left */ padding-right: 9%; /* Change (normal) italic-normal-oblique */ font-style: normal; font-weight: 200; } .navbar .navbar-inner { -webkit-box-shadow: 0px 0px 0px ; -moz-box-shadow: 0px 0px 0px ; box-shadow: 0px 0px 0px transparent; background:none }I used TextWrangler to copy & paste the php snippet into my functions.php doc.
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!
The demo doesn’t work.
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.
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!
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.
Hi Troy,
Thanks you very much for this kind message and your support!!
Having a difficult time time trying to change the DROPDOWN menu background color. I changed the navbar color, but also need to the dropdown color to match. THANKS!
Thanks for it.
On the page Demo:( customizr.websiter.ro ) there is carousel indicators, how it works?
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.
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.
Hi.
It’s works really well in the laptop screen but Submenus doesn’t work on Mobile and Tab devises…
Any help appreciated
Please refer your question to the WP Customizr support forum, along with details of your problem (what exactly doesn’t work for mobiles and tablets) and a link to your website and I will look into your problem.
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?
Never mind. I just figured it out. Thanks! 🙂
Why do add the pages on the drop down menu? Thanks
If I dont want to do this in child but in parent theme how can i do this?
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.