Mobile Menu Dropdown Configuration

[nhirajeta]

Hello all!

I have a client who has a lot of items in her menu:

shopshinelife.com

The theme we chose looks great on desktop, however 75% of her customers are on mobile, and the nav doesn’t perform well.

I limited the number of items currently in the mobile nav because #1 it’s hard to scroll (page content wants to scroll as well) and #2 the sub menu items are prelisted. I’d love to get them to dropdown when pressed, I just need some help with that code.

Here’s a simple structure of how extensive the menu is:

Home
About
Products
-Best sellers
-Hot Deals
-Our Specialty
-Quick Ship
-A Gift For
--Her
--Him
--The Little One
-A Gift That
--Celebrates
--Encourages
--Renews
-Categories
--Apparel
--Bracelets
--Earrings
--Hand-stamped
--Keychains
--Necklaces
--Rings
-Collections
--Have Faith
--Monogram Madness
--Our Angels
--Personalized
--SHINE in the Home
--SHINE with F&C
--SHINE with Lisa Leonard
--This & That
Blog
FAQs
Contact
My Account
Checkout

Thanks!
Nicco

[rocksmethew]

achieved by using CSS3 media queries. In the ddmenu.css of Template 4

#ddmenu li div.column.mayHide {
display: none;
}
#ddmenu ul {
width: 100%;
border-radius: 0;
}
#ddmenu li {
position:relative;
width:33.33%;
box-sizing:border-box;
text-align: left;
border-top:1px solid rgba(255,255,255,0.3);
border-right:1px solid rgba(255,255,255,0.3);
}
#ddmenu li.full-width {
position: relative;
}
#ddmenu div.dropdown {
width: auto;
left: 0px;
text-align: left;
}
#ddmenu li.full-width div.dropdown {
width: auto;
}
#ddmenu div.dropdown.right-aligned, #ddmenu div.dropdown.mayRight {
left: auto;
right: 0px;
}
#ddmenu li div.column {
width: auto;
border: none;
}
}

http://goo.gl/OvuYxO

[nhirajeta]

What is this template 4 you are talking about?

[Author]

Posts