Coast theme - Accordion section question
Under The Beach Menu of the Coast theme is a Menu using the built in accordion. When viewing on a laptop, the top items won't minimize. When viewed using the mobile size these two headings still show the "-", but won't show the information associated with it. It will not accordion. Any suggestions how to make them accordion?
Hmm, seems the 'is-active' class is not behaving. Have not been able to see why but if you remove that class from the corresponding list-item-containers all accordions will be collapsed and 'accordion' 
http://bob.coffeecup.com/storage/help/accordion-is-active.png
(It is probably easiest to select that element from the Inspector Pane.)

http://bob.coffeecup.com/storage/help/accordion-is-active.png
(It is probably easiest to select that element from the Inspector Pane.)
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Thanks Bob. Sorta worked. Still not accordion -ing.
Weird, it's working on my end
Can you get me a link to the project so I can download and take a look?

Can you get me a link to the project so I can download and take a look?
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
I don't have a project yet. Was just looking at the Coast theme and trying to understand how it was built. When I minimized my browser to a "mobile" level I noticed the Menu didn't accordion right. It was the top Menu sections when it is viewed in a "desktop" level. After I removed x-is active from the List Item Container, it would expand, but not collapse. This is only for the top two menu items. These top two are "Small Plates" and "Pastas Et Cassecroute". The others work right no matter what level mobile or desktop.Want to use Coast theme, but want the accordion to work on all. Don't know how to delete the ones that don't work right and not mess everything up. Thanks.
So I will take a stab at this.....Its designed to work that way. If you notice when on mobile the menu is blue and the + and - settings are visible. When on desktop the menu is white and the + and - settings are somewhat invisible (except on hover which probably could have been modified to not change colors).
The reason it is done this way is that if you are in a hurry and want to order you get on your desktop and there is the menu. No clicking menus getting hungrier. Just scroll. On mobile you click to expand because that is quicker on mobile. Sweet ! Lets order !
If you want to force your hungry eaters on desktop to expand the menu then you will need to change the container yummy items display from block to none like on mobile. Move the slider back and forth and you will see.....
The reason it does not work I believe if you view on desktop and then reduce your screen to mobile is that it still thinks the container yummy items are set to block. If you reduce your screen to mobile size and then do a refresh it will load the mobile version that works properly.
The reason it is done this way is that if you are in a hurry and want to order you get on your desktop and there is the menu. No clicking menus getting hungrier. Just scroll. On mobile you click to expand because that is quicker on mobile. Sweet ! Lets order !
If you want to force your hungry eaters on desktop to expand the menu then you will need to change the container yummy items display from block to none like on mobile. Move the slider back and forth and you will see.....
The reason it does not work I believe if you view on desktop and then reduce your screen to mobile is that it still thinks the container yummy items are set to block. If you reduce your screen to mobile size and then do a refresh it will load the mobile version that works properly.

Bootstrap 5 CSS Grid.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.