nested menus in RFF

User 2765857 Photo


Registered User
614 posts

Hello all,
Have been working on the menu for some time now with CC's Nested menu and a few others that were shared with tutorials. I must be really dense as for some reason I still cannot get it to work correctly on the new RFF site I am doing. I have 23 pages already done BUT wanted to use a new menu since it is now a RFF site. My old CC-MB will work BUT I want to use the new Nested One with the Hamburger for our RFF site if possible.

I am sorry to bother you all as you have your own work to do but If someone can please check what I have done and try to point me in the right direction I would really appreciate it. I am not asking anyone to do my work but if I know what I am doing wrong I can go on and finish the menu to have it work right.

I think it is my BP's ??? Our site has the lowest BP at 352 than 459 - 544 and 640 and a few more after that.
I am attaching a zip of the test menu hopefully someone can look at it??
I appreciate any and all help and advice that can be given.
Ray
Attachments:
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 244626 Photo


Registered User
811 posts

Ray, I added another page to your project and made a Topbar that may work. I also added a link in the header to remove the triangles. Just delete the link if you want to have them back.

When I added the menu as a component to the second page, the second break-point from the bottom was effecting the centering of the mobile menu text so I re-centered the items. I am not sure why that is happening unless on your first page there is a class conflict setting causing it.
Attachments:
Bootstrap 5 CSS Grid.
User 2765857 Photo


Registered User
614 posts

Twinstream wrote:
Ray, I added another page to your project and made a Topbar that may work. I also added a link in the header to remove the triangles. Just delete the link if you want to have them back.

When I added the menu as a component to the second page, the second break-point from the bottom was effecting the centering of the mobile menu text so I re-centered the items. I am not sure why that is happening unless on your first page there is a class conflict setting causing it.


Twinstream,
Sorry for the delay in replying have been trying but it would go to "Forbidden" if I tried using Quote Post, so trying without the Quote Post.
I thank you for taking the time and will try and see what I am doing wrong. Your sample seems easy enough but with me time will tell. You did a great job on sample and hopefully I can can add to it and get it to work.

I also took my time and actually did the Off Canvas one and on a new blank page it works! BUT when than trying to save as a component to add to another project was unable to do that, so back to the learning process.

Once again thank you I appreciate it very much.
Ray
Note: Yes :D I am able to reply back to you CC Support has found and fixed the problem.
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 2765857 Photo


Registered User
614 posts

Still working on this menu thing, before I get to the point and finally give up :( and just keep the original one that is on the site now I thought I would ask for help again.

Inger I did add the Style to the header you gave to get rid of the arrows but could not get that to work either so gave up on it, thanks anyway.

Twinstream - Thank you I have been working on the sample going between what you made and the one I would like to (hopefully ) use that I made. What seems to have me stumped is after I add it to my site all is wrong and it looks like I have to actually redo and rename all the classes and styles again???

If I can impose and ONLY when someone has extra time can you look at the zip attached once again and just let me know if I am on the right track? I added it on a test page that would actually have the breakpoints needed for the site.
At this point any help as far as pointing to mistakes I am making is needed, again I am not asking anyone to do do my work just for help in what is wrong so I can correct it and go on.
Thank you,
Ray
Attachments:
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,535 posts
Online Now

Yeah, I found out that the script didn't work. Probably some wrong classes. I didn't have time to check it properly, and besides, it was during my Forbidden period. ;)

I had a look at your candy site to see the 'old' menu. The submenus open when you hover over them. I think I've heard that hovering doesn't work well on phones, since you don't have any pointing device (mouse).

Then your old menu's submenus go on top of the page contents, it doesn't push it down. That should be doable in RFF, with z-index. I haven't tried, but I will.

But I guess the biggest problem, or one of them at least, must be that the menu doesn't collapse and get hidden under the 'hamburger bar' at the same time, it fist collapses, then a bit later it disappears from sight. Have you played with display: none? Let it kick in a bit earlier? It is confusing that you have such a lot of breakpoints. But you need to go one by one up and see if you can make it work.

Twinstream added a new style sheet to the version of your menu that he posted some days ago. Try that to get rid of the triangles.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2765857 Photo


Registered User
614 posts

Thanks for looking at it Inger I know that at this point I have to many BP's and want to cut them in half. I will take the info you wrote and look at it again tomorrow right now I have to walk away from it before I delete it all.
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 244626 Photo


Registered User
811 posts

Hi Ray....I was busy painting the last couple of day. It appears to me that you want your menu to collapse above the 640 blue breakpoint at a breakpoint of your choosing ? This will not be possible because you are using the data-toggle on the hamburger which limits you to only three choices for the collapse (640 or 1024 or full width). If the menu is going to conflict with your settings you are probably duplicating from the earlier site you may have to redesign to the 640 breakpoint so you can use the data toggle or you would have to find another means for a menu.

There are other options for building a menu where you can define your own breakpoint much like Menu Builder. https://www.w3schools.com/howto/howto_j … opdown.asp
Bootstrap 5 CSS Grid.
User 2765857 Photo


Registered User
614 posts

Twinstream wrote:
Hi Ray....I was busy painting the last couple of day. It appears to me that you want your menu to collapse above the 640 blue breakpoint at a breakpoint of your choosing ? This will not be possible because you are using the data-toggle on the hamburger which limits you to only three choices for the collapse (640 or 1024 or full width). If the menu is going to conflict with your settings you are probably duplicating from the earlier site you may have to redesign to the 640 breakpoint so you can use the data toggle or you would have to find another means for a menu.

There are other options for building a menu where you can define your own breakpoint much like Menu Builder. https://www.w3schools.com/howto/howto_j … opdown.asp


Hello Twinstream,
Thank you again for given me your input and help that does explain my problem. As long as I start on blank pg at 640 any menu I do works it is when I try to incorporate in my test RFF site with those extra BP's it does not NOW I know why. Its been like a dog chasing his tail on this :rolleyes:

I will look at the W3 link but if I get this right BEST for me to actually restart from scratch do the menu thing first - than add what I need on each page?

Or another thing is since I have a been making a new project with RFF and have 23 pages done and have my original MB on stay with it and finish the other 32 pages.
Maybe one day I can get better at this with a lot more practice.
Once again THANK YOU
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 122279 Photo


Senior Advisor
14,535 posts
Online Now

Thanks Twinstream, for pointing my nose to the properties of the data-toggle attribute. I hadn't thought of that.

Ray, Try the attached file.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2765857 Photo


Registered User
614 posts

Inger wrote:
Thanks Twinstream, for pointing my nose to the properties of the data-toggle attribute. I hadn't thought of that.

Ray, Try the attached file.


Inger, Thank you I downloaded and will look at it this afternoon, hopefully I won't mess it up to much :)

Twinstream once again Thanks for all the info about the data-toggle also and redesign to the 640 now makes sense.
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"

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.