Muse accordion menu too long and doesn't scroll

[notmyrealnameeither]

So, I've made an accordion menu in Muse. It has a few problems though. One is that it's too long, so in small desktop resolutions and on mobile devices, the last part of the menu is cut off, and when the content scrolls, it stays fixed !@.

The accordion menu is pinned to the top right corner of the browser, because I want the menu to always be there. Is that the problem?

[David Asch]

You will need to compromise on this. If the menu is too long you will need to unpin the menu, or perhaps find a third-party widget that allows the menu to be scrolled independently.

David

Creative Muse

[Günter Heißenbüttel]

You are right Tim Brandt. The reason is the pinning of the accordion.

But fortunately there is a tricky workaround, which meets your intentions:

I assume, you have a browser pinned accordion with only one „sheet“ containing a long menu. This won’t scroll in windows of a small height, when the contend exceeds the browser widow height.

So do this:

1. Select the complete accordion and set the stroke to „0“.
2. Add a second accordion title/sheet under the first one by clicking onto the „+“ button.
3. Now open the accordion’s configuration panel and deselect „Edit together“.
4. Active the second accordion title bar, make it transparent in every state and set the stroke to „0“.
5. Delete the text caption of the second label and choose a font size of 1 pt for the second label in every state.
6. Go to the „Spacing“ panel to set the „Padding" to „0"
7. Now you can reduce the height of the second label to a very small amount.
8. Set the height of the second accordion sheet to the smallest value possible.

If you now open the accordion in a browser window of a small height, you can open the first accordion sheet and scrolling will be possible, even if the menu exceeds the browser window’s height.

Puuh! This description sounds more complicated as it in fact is. A matter of a minute.

[notmyrealnameeither]

It doesn't work here. One possible useful piece of information... I have my accordion menu on a master page in the header section. Could that be why?

[Günter Heißenbüttel · Accepted solution]

Unfortunately I have to withdraw my answer in post 2! No idea, what I did wrong. I tested this workflow several times successfully, but I can’t reproduce it any more.

Re-thinking the layout situation, it seems quite logical to me now:

If you pin an element to the top of the browser window, it causes, that this element stays visible on the screen, even if you scroll down the window.

This of course is valid for accordions too: If you pin it, it stays visible, even if you scroll down in the browser window. Bottom elements within an accordion „sheet“ so never will be visible, when the accordion „sheet“ is longer than the height of the browser window. If these elements would be visible, the accordion label would have to scroll upwards – and that is forbidden, because it is pinned to browser view.

–> Please excuse the confusion!

[notmyrealnameeither]

Thank you for your help. I will do as you suggest, rethink the layout. I will just have to make the menu shorter, maybe using one long page instead of several sub-pages (which seems optimal for several reasons anyway). Thanks again

[Günter Heißenbüttel]

„It doesn‘t work“ is not a useful information, because we don’t know, what „doesn’t work“. (And: There is no „header section“ in Muse.)

Do this:

• Please delete all pages except one and all elements except this accordion menu.
• Save this .muse file under a new name.
• Upload it to Dropbox, CC Files or a similar file sharing service and
• post the download link here.

Then we can have a closer look.

–> EDIT: Please read my post 7!

[David Asch]

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel  wrote

„It doesn‘t work“ is not a useful information, because we don’t know, what „doesn’t work“. (And: There is no „header section“ in Muse.)

This is the header Section, no?

[Günter Heißenbüttel]

Yes David Asch​, I know this!

But the header is solely a layout indicator and has no „real" consequences and effects for you page and its elements.

Footer elements are always (well, not really „always“) below non-footer content, move synchronously with the height of the browser window and may be dynamically placed always at the bottom of the browser window, even if the page content isn’t that high.

The header has no consequences for your page or element behaviour at all. It simply exists, to give you a visual indication to support your layout activities.