Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-03-18

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.