Toggle then flex bar nav component...

User 1903875 Photo


Registered User
3 posts

I'm using Site Designer 5.0, Build 3332

I've added the Toggle then flex bar nav component to my project.

When I click on the menu icon at mobile screen size <640 , the the mobile menu appropriately slides in and out of view.

When I initially launch the page in mobile size, I would like the mobile menu to slide out of view. Any thoughts?

Also, when I click on a mobile menu item, I would like the mobile menu to slide out of view so my page displays without the menu visible. Any thoughts?

Thanks!
User 2699991 Photo


Registered User
3,409 posts
Online Now

Jim wrote:
I'm using Site Designer 5.0, Build 3332

I've added the Toggle then flex bar nav component to my project.

When I click on the menu icon at mobile screen size <640 , the the mobile menu appropriately slides in and out of view.

When I initially launch the page in mobile size, I would like the mobile menu to slide out of view. Any thoughts?

Also, when I click on a mobile menu item, I would like the mobile menu to slide out of view so my page displays without the menu visible. Any thoughts?

Thanks!

When you click on a menu item that takes you to wherever the menu link is pointing to so once that happens the menu should disappear. Are you saying this doesn't happen?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 2699991 Photo


Registered User
3,409 posts
Online Now

Hi again Jim
Just a coupke of things

1/ If you have a question regarding Site Designer then it would be better for you to ask in the "Site Designer" section (the one below this "welcome to the forum" same for any other particular apps choose the relevant section.

2/ With themenu at mobile widths I realize now what you mean is that you want the menu to hide when you open a project (I thought before you meant when viewing the project live)
at mobile widths, go over to the "Elements" tab

there in the corner just above the coloured buttons is a "tick" box titled "Hide x items in this breakpoint"

select the tick box until items are hidden (in other words a tick appears)
or
If you look in the elements tree you will also see the container with the ID "view menu" has an eyeball icon thingy displayed, click the eye icon and the menu will disappear and the eyeball will have a line through it, to view the menu at any time you can simply click the eyeball again and it opens for you to work on

here is a link to a quick silent movie demo video

https://youtu.be/9P9GsfnbN5A

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 122279 Photo


Senior Advisor
13,484 posts

Jim, I thought you were speaking about how the menu appears/disappears when you have built it into a page. I made a quick one here: inger.coffeecup.com . There is no content apart from the menu. And it is working the way it has been designed. If you visit that page with a mobile phone, the menu is not showing, just the 'hamburger' thingie.
If you click on the 'hamburger', the menu comes sliding in, and when opening one of the links, the page in question opens and you don't see what the menu does.
If you use the back button to go back to that blank page, you will see it in the same shape as when you left it, with the menu open. That is normal when using a browser back button. But if you refresh the page, the menu will disappear again. Also normal behaviour.

What Wayan explained to you, is important to you while building the page(s), so that you can see how it is going to look when the menu is hidden, but also easily make the menu appear when you need to edit it.

What is important after you have finished it and uploaded, is how it performs when your visitors come to see what you are offering.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,409 posts
Online Now

Supposing the menu item points to a section further down the same page?
that's what I think he means which then the menu should disappear when its clicked on and one then shouldn't have to click the hamburger thingy to close the menu list

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 122279 Photo


Senior Advisor
13,484 posts

I have modified my example, https://inger.coffeecup.com to include a target further down the page. The first menu link makes the page scroll down to it. If you then scroll back up, the menu is still visible (I'm talking about the phone size menu), also if you use the back button.
The wee picture I'm using as a target has a link to get back up, and clicking that brings you to the top of the page, and the menu will be closed. That works the same way as refreshing the page.

I agree that it would be nice to have the menu close after a button has been clicked. We'll have to see if we can achieve that.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 556652 Photo


Registered User
106 posts

Inger wrote:
I have modified my example, https://inger.coffeecup.com to include a target further down the page.


@Inger

is the "Gallery" item in your menu going to a page you are developing for your components or is it a link to the Coffeecup Component Shop to be?
___________
Artist At Heart
User 2699991 Photo


Registered User
3,409 posts
Online Now

Inger wrote:
I have modified my example, https://inger.coffeecup.com to include a target further down the page. The first menu link makes the page scroll down to it. If you then scroll back up, the menu is still visible (I'm talking about the phone size menu), also if you use the back button.
The wee picture I'm using as a target has a link to get back up, and clicking that brings you to the top of the page, and the menu will be closed. That works the same way as refreshing the page.

I agree that it would be nice to have the menu close after a button has been clicked. We'll have to see if we can achieve that.


What if the menu is fixed to the top?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 122279 Photo


Senior Advisor
13,484 posts

lwetzel wrote:
Inger wrote:
I have modified my example, https://inger.coffeecup.com to include a target further down the page.


@Inger

is the "Gallery" item in your menu going to a page you are developing for your components or is it a link to the Coffeecup Component Shop to be?


They are my own components. CC can have them if they choose to. You are welcome to look around and do some 'shopping' if you find something interesting. ;) Also, if someone has some good ideas for me, especially for Materialize and Vanilla, I'd be happy. It is a work in progress, and right now I'm trying to do something for users of the HTML Editor.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,409 posts
Online Now

Inger wrote:

I agree that it would be nice to have the menu close after a button has been clicked. We'll have to see if we can achieve that.

I have done something that might work out nice looks promising but just a couple of tweens for fully responsive. I am off back to Bali today for a day or so I will post example when I get back


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id

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.