I figured this out. I coded all of one group’s dropdown menu-items in to one width. Here’s what I did:
Our Trips dropdown:
.nav-head ul ul li#menu-item-32, .nav-head ul ul li#menu-item-842, .nav-head ul ul li#menu-item-841,
.nav-head ul ul li#menu-item-63, .nav-head ul ul li#menu-item-1065, .nav-head ul ul li#menu-item-1165 {width: 195px !important;}
Your Trip dropdown:
.nav-head ul ul li#menu-item-68, .nav-head ul ul li#menu-item-840, .nav-head ul ul li#menu-item-67,
.nav-head ul ul li#menu-item-66, .nav-head ul ul li#menu-item-59 {width: 243px !important;}
Canyoneers Story dropdown:
.nav-head ul ul li#menu-item-61, .nav-head ul ul li#menu-item-60 {width: 171px !important;}
And I also set the below to width auto (this also has a white background ’cause I have a small space between the submenu items and I don’t want the page text to show between them):
.nav-head ul ul {display:none; position:absolute; width:auto; top:100%; background:#fff; padding-right:11px;}
Any idea of how to remove the toggle menu on OneColumn’s mobile phone layout leaving the regular desktop navbar, Toni? Thanks :)!
The following 3 lines under @media screen and (max-width:767px) towards the bottom, are the ones that change it to the toggle menu. Delete all 3 of them. I don’t know if this is the recommended way because if you ever want it back, the coding is gone. I always work in a copy of the original css, and save the original in case I need to add something back.
.nav-head ul {display:none;}
.nav-head {padding:0;}
.nav-head select {display:block; width:100%; height:35px; margin:0 auto 0; font-size:1em; line-height:1.2em; color:#333; background:#f8f8f8; border:0;}
Make sure you only delete these lines under @media screen, not the ones up in the top of the css. @media screen are always the settings for the smaller width devices.
Theme Author
Guido
(@guido07111975)
Hi,
You can also install a custom style plugin and add this:
/* MOBILE */
@media screen and (max-width:767px) {
.nav-head ul {display:block;}
.nav-head {padding:10px 0;}
.nav-head select {display:none;}
}
Now you don’t have to change the original files. But I prefer the mobile menu..
Guido
