Scrollable mobile menu - RocketCake Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > RocketCake
	Scrollable mobile menu

chrissyzmissy Registered User
Quote
2018-01-01 21:53:02

I'm having trouble with the mobile menu. I added the following to my menu:

position: fixed; z-index: 9999;

Now my menu is fixed which is great but the problem is my mobile menu has about 8 links and when viewed from mobile device, the page will scroll but not the menu, the menu is not scrollable so the person viewing my site from a mobile device can only see the first few links in the mobile menu.

Is there a code or a way for me to make a fixed mobile menu scrollable?

niko Moderator
Quote
2018-01-02 19:14:58

Yes, you could find the id of the menu pane, and as CSS rule for this, add the following to your page's CSS:


max-height: 90vh;
overflow:scroll;

that should do the trick.

chrissyzmissy Registered User
Quote
2018-01-02 23:57:05

Hi Niko,

Thanks for the quick reply!

However I'm not sure I understand where to paste that code. Should it go in the html file or css file? And should this be done after it's been published to local disk or should I paste it directly from rocketcake as additional css styles?

Sorry for being such a newbie, looks like I need step by step instructions to get this to work since I'm not too sure where to find the id of the menu pane.

Thanks

chrissyzmissy Registered User
Quote
2018-01-04 00:58:41

Hi again,

I created a test page (test.html) with a container at the top which is fixed, then the mobile menu which is also fixed and then another container. I added the code you mentioned above to the id of the menu pane of the test.css file but the mobile menu still doesn't seem to scroll. The mobile menu has 20 links and from my mobile device, I can only see the first 14 links and can't get the mobile menu to scroll to see the other 6 links.

You can see the test page here: http://www.naborama.com/test.htm...

Not sure what I'm doing wrong but once the page is viewed from mobile device, the page background will scroll but the mobile menu still doesn't scroll and all links on the mobile menu still don't show.

Any help would be appreciated in order to get this to work.

Thanks

niko Moderator
Quote
2018-01-04 17:02:47

Right-click on the menu, use "HTML Code..." to see what id it gets generated, it usually is something like menu_5c504649. (I'll use this one in this example)
Then use the menu "View -> HTML Code of page... -> Additional CSS Styles" and enter


HASTHAGmenu_5c504649_pane 
{
    max-height: calc(80vh - 30px);
    overflow: scroll !important
}

(be sure to replace the HASTHAG with the actual hashtag (this forum cannot display it) and also replace the number id with the one of your menu)

chrissyzmissy Registered User
Quote
2018-01-04 18:17:53

Niko, thank you! thank you! thank you!
One last question, then menu now scrolls (thanks to you) but is there a way to remove the scroll bar on the right side?

niko Moderator
Quote
2018-01-05 04:52:18

No, afaik, you cannot remove the scrollbar, sorry.

chrissyzmissy Registered User
Quote
2018-01-05 16:53:52

Is there a way to change the color of the scrollbar?

niko Moderator
Quote
2018-01-06 07:19:17

Not sure about that, you can try one of those, but I'm not sure if this will work: https://stackoverflow.com/questi...

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons