Ambiance Pro sub-menu on mobile

[Dag-Erling]

Hello

I am using the Ambiance pro theme for a client. It doesn't have sub-menues on from the start so I've turned them on. While it "ok" on on the PC and larger tablet versions it doesn't work at all for mobiles.

RIght now it puts the sub menu on top of the other menu. I would like it to push it down instead making room for the new parts of the menu.

Do I have to fix this in Php or can it be done by CSS alone?

http://www.dagerlingjensen.no/montasje

[David Chu]

Hi,
I can see through the dropdowns at small sizes, so I see stuff I'm not supposed to see. Is that what you're referring to? If so....

It's a very complex situation, because you have very fancy styling: opacity, opacity on hovers, transitions, and probably more that I can't see. (that's why I dislike using dropdowns on this type of header)

I'm pretty sure PHP cannot fix this... a lot of CSS work could. I would start with looking at preventing the opacity at smaller sizes, and re-spacing dropdown heights. The transitions may need attention, too.

Your current styling would look great without the dropdowns!

If I were asked to code dropdowns on such a theme, I would first advise them not to. 🙂 Then if they insisted, I would use Ozzy's very nice way of doing it.

Good luck!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Dag-Erling]

Hey

Yes, the CSS is a mess on it right now. Most of it is untouched from the Ambiance Pro CSS style. I'll take a look at the CSS more and see if I can't fix all the little quirks that are there to get it under control.

The client wants to have sub-pages so I think I'm forced to make drop downs work. (Even though I suspect we are misunderstanding each other a little bit). The link you sent seems to be a nice way to do it so I'll see if I can't get that done.

Thanks for the link and the reply 🙂

[David Chu]

Dag,
I hear you. 😉 The whole menu issue is big with almost any client. Those CSS transitions are so cute, but they can really mess with dropdowns, and also things like links on sliders, etc., so they need taming.

In case they want an actual separate submenu, I made a tutorial about doing that. It gives you a separate submenu that only appears when you click a menu item with "children". It's definitely some work, but if you have many items under a top menu item, it is much more usable than having big dropdowns.

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Dag-Erling]

Hey

I think I solved it but I didn't make a new menu. I took your first tip at heart and just fixed the CSS. It seems to be working fine on mobiles now.

Thanks for the replies and help David :).

I've bookmarked the tutorial. Might want to learn how to make it from scratch anyway. Just don't want to learn in the middle of a theme.

[David Chu]

Dag,
That's looking great, nice job!

I agree, adding a big task in the middle of a project is not always the best, for budget and other reasons.

It's good to meet you, and see you later!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts