[Resolved] Scrolling within a collapsed bootstrap dropdown mobile menu

[Author]

Posts

[Geoffrey Cleverley]

Hi there,

I am working with bootstrap menus in layouts.

I have added the navbar-fixed-top class to my menu to display on mobile devices.

I am migrating an html site to wordpress:
hidden link

As you can see, on the plain html bootstrap site, when you open dropdown menu at mobile device widths, it is possible to scroll inside the menu.

The menu is quite long, with a depth of 4. So as you dig deeper it is possible to scroll further down.

I have managed to get something similar working on wordpress:
hidden link

The problem is that when you open the dropdown menu the dropdown height seems to be determined by the viewport, and it isn't scrollable within that area.

As the menu is so deep, some of the items go below the immediately viewable area, and it isn't possible to scroll down to them.

It seems that when you are scrolling, even with the menu dropdown open, it is still scrolling the page 'behind' the menu.

Do you know how I can change this behaviour, so that scrolls are registered and scroll the content within the dropdown?

Thanks for your help in advance

jeff

p.s. I wish the client would just let me find a solution to simplify her menus but she is an artist who plays on words and imagery, and these long menus of made up words in their tree structure are considered part of her art. If I can't get this to work, I will have to revert to a non-fixed menu which just pushed the image down.

[Beda]

Yeah, I recall this issue, I have solved it in past, in a custom theme, and to be honest, I forgot how.
But I created a full Custom Cell for layouts to do this.
Layouts Cell does by default push the content, it has not a fixed height in the menu container.

You might try to customise this by CSS, or create your own cell.

I lost access to that site where I added a solution, and am asking for access and will update you here soon (at most probably I will just pass you the whole cell's code, for reference).

Maybe these tutorials can help meanwhile:
hidden link
http://stackoverflow.com/questions/19227496/scrollable-menu-with-bootstrap-3-menu-expanding-its-container-when-it-should-n
hidden link

This is what I used to customise my own cell (along with a bunch of other customizations.

Please await my reply here so I can pass you my custom Cell code as soon as possible.

[Geoffrey Cleverley]

Tutorials are awesome, nice one Beda.

I look forward to seeing your solution.

Thanks

Jeff

[Beda]

OK, I pulled that site yesterday, huge one it is 😛 and lots of customizations...

To be honest I am always surprised how fast one forgets how things were done... in nightly sessions of coding and "hitting the head against a black screen" 😀

Ok, here I uploaded the nav-walker, the custom cell, and so on:

1. Custom Layouts cell (with small instruction on top of file)
http://pastebin.com/VQzzHmfV

2. Custom Bootstrap Walker:
http://pastebin.com/DLZf4qhW

3. Bootstrap NAV template mockup
http://pastebin.com/mCEdYFkq (This Should work also with more depth)
Call it with get_template_part( 'bootstrap-nav');

Of course, the cell and the above nav are the same, I just created a Cell, because I needed that independently in Layouts.

I hope that helps.

Also acknowledge that apart of being Custom Code, it also requires some more CSS hacks, but those are minimal.

And the more I think about when I built this site, I recall being it a serious pain, building a proper Menu.
There are also some BUGS in BootsTrap itself, related to what happens when a menu is expanded and you want to collapse again.
But those should be only on some mobile devices like iPhone.

The code I passed you is 100% my creation (well, following other tutorials and examples too) so you do not need to be afraid of any © issues ;), but I suggest you just use it as a reference since it will hold all theme domain slugs (Minimax) I used.

[Geoffrey Cleverley]

Seriously Beda, wow, I can't thank you enough for these.

Also... if I'm understanding correctly, this navwalker may solve the depth dropdown issue that stopped me implementing a single custom split bootstrap menu in my other post:
https://toolset.com/forums/topic/creating-a-split-collapsable-bootstrap-menu/

Which is double awesome, I'll check it out and if so, I'll link this post in on that side too.

Re losing track of tweaks and customisations across different projects... definitely, I can't possible imagine how you guys keep track of everything, boggles the mind. That's part of the reason I go into such overly needed depth in these support requests, it's part storing solutions and my thought process getting there. I'm constantly referring back to my previous requests and a bunch of other users solved problems too.

Duly noted re css hacks, copyright and utilising as reference.

Outstanding support Beda. I'll get onto it and get back to you, let you know how it goes.

Cheers mate

Jeff

[Geoffrey Cleverley]

Hey Beda,

So I've testing this, and I got it to work. But ran into the same problem from the other forum post... the dreaded depth limitations.

I have it working using the your snippets on a sample page:
hidden link

Which is great, but it only allows menus to a depth of 3. My use case needs 4 levels.

Still, with regards to my split level needs from the other posts this is great. I'll detail more there.

Anyway, the really good news is that by tweaking the css I managed to get my old menu to scroll and display correctly.

See here:
hidden link

I used max-height styling, but swapped out pixels for viewport height units. And then gave the dropdown menu extra padding on the bottom to keep the bottom items in the viewport and scrollable.

#unified-menu-phone .ddl-navbar-collapse {
		height: 99vh !important;
	}

ul#menu-unified-menu {
                padding-bottom: 80px;
}

Sweet tweak, simple and does the job... though I am still using multiple menus and display styling.

I chose to go all the way and take up 99% of the viewport, scrolling inside a limited dropdown is poor design and this goes someway to alleviate the problem caused by this and the extra long menu.

Thanks again Beda, those snippets are really useful, pulling them apart helped me understand things more, and I can see me integrating them in a couple of other sites very soon.

Outstanding support.

Jeff