I'm following your discussion and I have a question: Why does the sub menu more often than not bounce so much up and down? Other than that everything is working fine.

It's meant for mobile devices, where one uses a finger to trigger the javascript that slides the menulist.

If you test on a pc in a small browser window - to get the hamburger menu - and use your mouse, moving the mouse pointer quickly over multiple - closed - menu items, the script is triggered to start sliding the next submenu while the previous sliding process - for the first submenu has not finished yet.
The sliding submenu pushes the next menu item down and tries to pull up when the next sliding command starts.And so on.

This creates the nervous behaviour you experience.

A few changes in the javascript might repair this, but in real life (on a mobile device) it's not a problem.
Unless you have a very quick and thin finger

Hennie
After getting friends to help I can say that the hanging menu works perfectly on all devices tested.
I am still not able to explain why for me the 360 doesn't work.
Would you be willing for me to use the structure of the menu on any bootstrap sites I build? If so would you like me to acknowledge you as the designer of the menu.
If you agree to me using your menu can you explain to me please how I would make the site become mobile at 768 and not 575 as you designed it.
Many thanks.

Russ

Hi Russ,

There is no need to give me any credits. I merely used an example from Oliver Wendt and copied it to Bootstrap4.
So use the menu by all means.

Changing the breakpoint would normally be easy, just slide the purple dot to 768px.
However, for some reason those Bootstrap breakpoints are fixed.
BTW: I don't know anything about BootsTrap, I just created the menu in BootsTrap to see if it would work.
Of course you could add a custom breakpoint at 768px and remove the custom CSS at 575px and redo at 768px.

Maybe there is someone more knowledgable then me, with an easier way to change?

Hennie
Thanks for response. I was relatively comfortable with coffeegrinder on v1.5 but an absolute novice on bootstrap or foundation. The menu you produced from Oliver Wendy's original work is the best I've seen and may well be the deciding factor to choose bootstrap rather than foundation..

Many thanks again.

Regards

Russ

It is a very cool menu ! You can adjust the collaspe of this menu easily by adjusting the position display for either the "mobile button" class or "menu" class to none (hide) or block (show) at the desired breakpoint area.

Bootstrap also uses classes to hide or show.

The class "hidden-xs-up" will hide a element from the smallest breakpoint (xs) up.

You could hide down also such as "hidden-lg-down" which will hide a element from the (lg) breakpoint down.

You are correct in that Bootstrap has fixed breakpoints that cannot be adjusted though. In Foundation, that is not the case. You can adjust your breakpoints.

Hope this helps, and again....cool menu !

Twinstream
Thanks .
This helps me.

Russ

I successfully used and modified the Bootstrqp4-menu.rsd in a new website I am creating (contained in this thread).

I made this into a symbol and am using the menu on other pages as well. All looks fine, but dropdowns will not work on pages except the home page. It looks like everything copied the same, including nav popdown, etc.

My test page is at http://faithneighborhoodcenter.com/newsite/index.html . The dropdowns work on the home page, but goto Get Help menu and select Location or Contactus . Those pages show the menu, but the dropdown doesn't work. Any ideas why?

Disregard -- I just forgot to past some code in the head.

Would like to know, however, how to stop jittery drop down menu, and how to populate sub links in RSD. Now I have to go to the html files and adjust code each time I make an update.

Hi Larry, just to let you know that the menu doesn't work on mobile.