Adding a CSS dropdown menu to existing off-canvas menu WordPress
- SOLVED
Hello,
Not entirely a WordPress question, but I'm looking for a way to implement a simple CSS only, single-child, vertical dropdown menu to this example: https://github.com/dbushell/Responsive-Off-Canvas-Menu
Note, I'm specifically aiming at example 4: https://github.com/dbushell/Responsive-Off-Canvas-Menu/blob/master/step4.html, when wider than 45.0625em (desktop)
Anything smaller and display: none; would be sufficient
Also note I'm <em>not</em> affiliated with this script
Could someone perhaps assist me with this?
Best regards,
Cor
Answers (2)
zebra webdesigns answers:
Hello COr
I need clarification in this. the example shows single line of 4 menus aligned horizontally.
Do you want to keep that and hide the mobile menu ??
in that case the css will be
@media all and (max-width:45.0625em){
#top .nav-btn {
display: none;
}
}
cor comments:
Hello,
I've just added a small mock-up (using Excel; sorry about that).
It should explain what I'm after.
In short, the 'blue' drop down menu currently isn't included in the mentioned script, and is what I'd like to see included.
zebra webdesigns comments:
Hello Cor here is the full pastebin version
http://pastebin.com/Vg0tX4wq
below is the exact css you need
#nav ul li ul{
position:absolute !important;
display:none ;
}
#nav ul:before, #nav ul:after{
display:none;
}
#nav ul li ul li{display:block !important;}
#nav{
overflow:visible;
}
#nav ul li:hover ul,#nav ul li a:hover ul{
display:block !important;
}
#nav ul li li a{
color:grey;
}
#nav ul li li a:hover{
color:black;
}
@media all and (max-width:45.0625em){
#nav ul li ul,#nav ul li:hover ul {
display: none !important;
}
}
zebra webdesigns comments:
I have attached the image, How it will look once you use the code I provided.