Highlighted

Accordion Widget - centering a menu within it

Engaged ,
Feb 02, 2018

Copy link to clipboard

Copied

Muse CC 2018 - Is it possible to keep items centred within an Accordion Widget that is set to Stretch to Browser Width on a Fixed Width Responsive page?

  • I have a fixed with responsive page with an Accordion Widget for the tablet and mobile breakpoint being used as the main menu/navbar.
  • The Accordion is is set to Stretch to Browser Width (100%).
  • Inside the Accordion Widget is a Vertical Menu Widget which I want to remain centred.
  • When scrubbing through the breakpoints in Design Mode the menu behaves as expected - the Vertical Menu stays in the centre of the page.
  • When Previewing in Browser or viewing on a mobile device from a BC test page the Vertical Menu does not stay centred
  • I have tried many Resize setting combinations for the Accordion Widget and none seem to work
  • It appears that the Accordion Widget (when set to Stretch to Browser Width), stays at the width of the browser as set in Muse and does not adjust to the width of the browser (device-width).

Just have a look at these sample sites (including downloadable .muse files), to see a small section of what is possible using the standard menus:

http://menu-tap.businesscatalyst.com​ (reduce window size to see the „hamburger“ menu.)

http://menu-tap-2.businesscatalyst.com

http://hamburgerdemo.businesscatalyst.com/seite-2.html​ (simple but easy-to-use)

http://strip-menu.businesscatalyst.com

http://standard-menu-test.businesscatalyst.com​ (including images)

Views

658

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Accordion Widget - centering a menu within it

Engaged ,
Feb 02, 2018

Copy link to clipboard

Copied

Muse CC 2018 - Is it possible to keep items centred within an Accordion Widget that is set to Stretch to Browser Width on a Fixed Width Responsive page?

  • I have a fixed with responsive page with an Accordion Widget for the tablet and mobile breakpoint being used as the main menu/navbar.
  • The Accordion is is set to Stretch to Browser Width (100%).
  • Inside the Accordion Widget is a Vertical Menu Widget which I want to remain centred.
  • When scrubbing through the breakpoints in Design Mode the menu behaves as expected - the Vertical Menu stays in the centre of the page.
  • When Previewing in Browser or viewing on a mobile device from a BC test page the Vertical Menu does not stay centred
  • I have tried many Resize setting combinations for the Accordion Widget and none seem to work
  • It appears that the Accordion Widget (when set to Stretch to Browser Width), stays at the width of the browser as set in Muse and does not adjust to the width of the browser (device-width).

Just have a look at these sample sites (including downloadable .muse files), to see a small section of what is possible using the standard menus:

http://menu-tap.businesscatalyst.com​ (reduce window size to see the „hamburger“ menu.)

http://menu-tap-2.businesscatalyst.com

http://hamburgerdemo.businesscatalyst.com/seite-2.html​ (simple but easy-to-use)

http://strip-menu.businesscatalyst.com

http://standard-menu-test.businesscatalyst.com​ (including images)

Views

659

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 02, 2018 0
Adobe Community Professional ,
Feb 04, 2018

Copy link to clipboard

Copied

Had the same recently: Unpin everything in the accordion and set the text boxes or what ever you use as a menu to be responsive in width and it should work as expected.

Thanks Günter Heißenbüttel​  btw.

If not, show us some more?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 04, 2018 1
New Here ,
Feb 05, 2018

Copy link to clipboard

Copied

Hi. I have very same problem. In my mobile menu in design mode works great as it should, however on actual site doesnt. I tried your advice and doesnt work for me. To describe bit more will show you hierarchy

- Accordion - set to pin to middle top of page and stretch to 100%

- content are of the accordion - no pin, pin option greyed out, set to strech 100%

Within content are is clearly my menu. Uses automatic vertical menu widget.

- menu widget - no pin, pin option greyed out, set to stretch 100%

- menu items- here is the issue ! - pin set to responsive left and cant change it as it is greyed out option, resize is set to none and cant change it as it is greyed out option

When i try to unpin top item as you mentioned, it still doesnt behave as expected and soesnt unlock resizing or pinning options. Please help.

www.ruzickapictures.com.au

Thx

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
Adobe Community Professional ,
Feb 05, 2018

Copy link to clipboard

Copied

Either pin it or stretch to browser width. To do both makes no sense and is unnecessary, though.

I attached a menu inside an accordion. Watch, if it fits your needs and tell us the difference.

Adobe Creative Cloud

Show us your muse with simply the menu inside the accordion. Please leave the pages, that are necessary for the automatic menu empty. This saves download time.

Best Regard,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
New Here ,
Feb 05, 2018

Copy link to clipboard

Copied

Thx. Will have look when get home from work and share mine eventually. Just one thing. That only one pin i used. Pinning to middle / top has reason that menu (header) is visible at all times even when scrolling down on the page. Anyway. Will let you know later afternoon.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
Adobe Community Professional ,
Feb 05, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
New Here ,
Feb 06, 2018

Copy link to clipboard

Copied

Hi. I looked at that your file and works great. there is difference with mine set up. My breakpoints are not responsive. However it shouldnt matter i believe as stretching to full width respond to any page no matter if responsive or not. I tried to change my breakpoints to responsive but then it did mess up different way. Was looking good in design mode but then on devices was cut off, missing big parts on the left side. Need static anyways as i am using scrolling effect.

here is my page

Microsoft OneDrive - Access files anywhere. Create docs with free Office Online.

made forum version by getting rid of pictures and replacing with rectangles with fill. Needed for understanding of my header. I would really appreciate if you would have look at it and gave me hand. Thx

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
LEGEND ,
Feb 06, 2018

Copy link to clipboard

Copied

This seems to be a bug: Elements placed into an accordion, which is stretched to browser width, won’t stay centred in fixed width breakpoints.

I’ll report this in the Prerelease forum.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
Adobe Community Professional ,
Feb 06, 2018

Copy link to clipboard

Copied

Hi Günter Heißenbüttel​,

Adobe Creative Cloud

Works perfect on my side. What exactly is the bug, so I am able to reproduce it?

I changed my accordion from the previous post to fixed width, added some breakpoints and still everything is centered.

Best Regards and thanks in advance

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
New Here ,
Feb 06, 2018

Copy link to clipboard

Copied

Thx all for assistance. Any idea how to achieve center of that menu and go around that bug? I mean. Some another way of doing that menu?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
New Here ,
Feb 06, 2018

Copy link to clipboard

Copied

I just tried if i can make the menu manually with buttons, plain text, invisible rectangle with hyperlink and found out that actually nothing adapt to the content area of the accordion / page width

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
LEGEND ,
Feb 06, 2018

Copy link to clipboard

Copied

And why not simply using a standard menu? You can style it as you like, you can make it browser-wide, you can even — if set to „manual“ — place images and buttons inline into the text labels. The only thing, you don‘t have, is this typical „accordion sliding effect“ when opening the menu. But: Are those eye candy gimmicks really essential for a well designed web site?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
New Here ,
Feb 06, 2018

Copy link to clipboard

Copied

I am not actual designer, i am starting Videographer. Making web on my own, so i am still learning Muse and options. You are right though. That sliding effect is nice but not really necessary. I just didnt know about better option. In way you are describing, can you open/close the menu with some sort of button? Something like this forum here has on mobile version. Otherwise this would be too big header and thats why I went with accordion way

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
LEGEND ,
Feb 06, 2018

Copy link to clipboard

Copied

Just have a look at these sample sites (including downloadable .muse files), to see a small section of what is possible using the standard menus:

http://menu-tap.businesscatalyst.com​ (reduce window size to see the „hamburger“ menu.)

http://menu-tap-2.businesscatalyst.com

http://hamburgerdemo.businesscatalyst.com/seite-2.html​ (simple but easy-to-use)

http://strip-menu.businesscatalyst.com

http://standard-menu-test.businesscatalyst.com​ (including images)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 2
New Here ,
Feb 06, 2018

Copy link to clipboard

Copied

Thank you for that. Will have look at it after work, but had quick look on the phone and looks good

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
LEGEND ,
Feb 06, 2018

Copy link to clipboard

Copied

Uwe​, we are dealing with a fixed width page!

As you are a member of the Prerelease Forum, just look at ​this thread, where I attached a sample .muse file: https://forums.adobeprerelease.com/muse/discussion/4963/elements-in-a-browser-wide-accordion-don-t-s...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0
LEGEND ,
Feb 06, 2018

Copy link to clipboard

Copied

I think this is a completely different issue, which has nothing to with centring a menu within an accordion.

If you want assistance for this issue too, please open an new thread.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 0