Expand folders on Brine mobile menu

Hi all

I have searched high and low through the forums and Googled my heart out, but I cannot find a straight forward answer to what seems to be a simple query.

I am using the Brine template and forcing the mobile menu to display on desktop — this was relatively straight forward by adjusting the mobile breakpoint — but standard behaviour shows pages nested within folders hidden until you click through to the folder on mobile menus.

To improve the UX, I'm looking to expand the nested pages within the mobile menu WITHOUT clicking through to the next level of the mobile menu to see all nested pages. In the Wells template for example, on desktop, all nested pages are expanded automatically and this is the type of behaviour I'd like to see in the mobile menu on Brine.

Can someone please help me out with some code here? I've exhausted most solutions I'm aware of. 

I also think this information would be valuable to the forum and other users searching for this query 🙂

Thanks

Sarah

PLEASE!!! Also looking for this answer for the Brine template, grateful if someone could provide the CSS code to make this happen.

23 minutes ago, Distilled said:

PLEASE!!! Also looking for this answer for the Brine template, grateful if someone could provide the CSS code to make this happen.

@Distilled @sarahcreates maybe you need to edit menu code in Dev Mode.

Hey! I was looking for this and I found a work around - 

If your site is forced mobile on desktop you can do this - 

take them out of folders and just make them links in the order you want them, and hhve the folder title be it's only link as it would be

then use .Mobile-overlay-nav-item:first-child{
   ; color: #ffffff;  
  }

with x-child being whatever number link it is

and change the color to whatever you want to be, to make a differentiation as folder header. I also bolded, and changed the font, but from there it is just whatever css you would use on the font. 

I hope that helped out!!

or, sorry it would change using 

.Mobile-overlay-nav-item:nth-child(2) {
   color: #ec8349 !important;    
  }

nth-child(x)

x is replaced with what number link

Hi - I'm trying to figure this out, need help please.

On desktop, the 2nd level of navigation shows on mouseover. On mobile navigation, i would like to expose 2nd level of navigation upon single click of the hamburger menu, rather than requiring additional clicks further in.

Website is www.trishlajain.com

Can anyone please help with this?

Mobile nav looks like this right now:

I want mobile nav to look something like this (rough mockup, ideally following site styles):

Can anyone please help with how to solve this??

@satyan Do you use Personal or Business or Commerce Plan?