Displaying hidden menu for mobile

User 2766910 Photo


Registered User
9 posts

I'm wondering if someone can point me in the right direction to accomplish a task. I've pretty much finished cloning the front page of my website in RLMP, but I've hit a wall in regards to displaying a mobile menu.

The test site can be seen here: http://www.capullo.com/test/index.html

In desktop mode, there is a vertical menu to the left of the content area. At a certain breakpoint, I've placed a fixed navicon in the upper left corner of the page, and I would like to display a differently styled menu when that navicon is clicked. Are there any tutorials dealing with this, or other references that I might access? Thanks in advance for any help!
User 187934 Photo


Senior Advisor
20,190 posts

Hi Steve,
Have you taken a look at CC's menu builder?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2766910 Photo


Registered User
9 posts

Yes, the menu I'm currently using for the desktop viewport was designed in Menu Builder (another awesome app). Designing a mobile viewport menu is no problem, I just can't figure out how to implement toggling between the desktop menu and mobile menu so that when a visitor clicks on the menu icon I have fixed in the upper left corner of the page, the mobile menu appears.
User 187934 Photo


Senior Advisor
20,190 posts

I'm not sure exactly what you want but you should be able to make the menu go to a mobile view at a break point and then have it move to just below your header image. I would first work the layout in RLM and get you nav container to move to the correct location then get the menu in the menu builder to go to mobile view at the same break point.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2766910 Photo


Registered User
9 posts

The function I am looking for can be illustrated on this forum post page. If I resize the browser window, at a certain breakpoint the horizontal header menu, search, cart and account icons all disappear and are replaced with a menu icon labeled Menu. When I click on that menu icon, a vertical menu slides down containing all the aforementioned items.

How is that slide down menu triggered? Viewing the page source, it seems as though it's pure CSS. I'm just looking for a resource that might instruct me how to implement a similar function on my site. Perhaps I should have posted the question in the Menu Builder forum?
User 187934 Photo


Senior Advisor
20,190 posts

Jquery would do it. The cc menu icon is a part of the same menu where yours is independent. I pretty sure CC is binding a click event to that button with js.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

Yes, the menu I'm currently using for the desktop viewport was designed in Menu Builder (another awesome app). Designing a mobile viewport menu is no problem, I just can't figure out how to implement toggling between the desktop menu and mobile menu so that when a visitor clicks on the menu icon I have fixed in the upper left corner of the page, the mobile menu appears.

Additional Jquery isn't required, MB can do the switch to a mobile screen layout.
When you get to your mobile or small screen breakpoint, switch the layout to "recommended for Small Screens".
You can set your icon there and edit/style your buttons for the mobile version.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2766910 Photo


Registered User
9 posts

That makes perfect sense, I will try that and let you know, thanks!
User 187934 Photo


Senior Advisor
20,190 posts

paintbrush wrote:

Additional Jquery isn't required, MB can do the switch to a mobile screen layout.
When you get to your mobile or small screen breakpoint, switch the layout to "recommended for Small Screens".
You can set your icon there and edit/style your buttons for the mobile version.

I think I said that here.:P
Eric Rohloff wrote:
I'm not sure exactly what you want but you should be able to make the menu go to a mobile view at a break point and then have it move to just below your header image. I would first work the layout in RLM and get you nav container to move to the correct location then get the menu in the menu builder to go to mobile view at the same break point.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2766910 Photo


Registered User
9 posts

I think I said that here.:P
Eric Rohloff wrote:
I'm not sure exactly what you want but you should be able to make the menu go to a mobile view at a break point and then have it move to just below your header image. I would first work the layout in RLM and get you nav container to move to the correct location then get the menu in the menu builder to go to mobile view at the same break point.


Yes, sorry for being obtuse. I've only been using these apps for a few hours, and I wasn't making the connection between the two. I was wondering what would provide the trigger for toggling the mobile menu, but Menu Builder does that when told to do so, as @paintbrush pointed out:

Additional Jquery isn't required, MB can do the switch to a mobile screen layout.
When you get to your mobile or small screen breakpoint, switch the layout to "recommended for Small Screens".
You can set your icon there and edit/style your buttons for the mobile version.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.