Hi,
I’m having a problem with making my dropdown buttons responsive. See here: http://amarisb.webflow.io/skin/microdermabrasion-skin-renewal
As you can see, on the desktop version it looks fine, but on mobile, the text runs off:
I’ve tried this method but it didn’t work. Any help would be appreciated!
Preview link: https://preview.webflow.com/preview/amarisb?preview=14fe724b83c0abdfe788e7d3feb563d1
You should not use those dropbdown buttons elements outside of a navbar. They haveopredefined properties for the majority of use case, ie text being short.
For what you want to do, you have to create your own custom dowpdowns in the form of a div or link block with text and icon inside and an interaction that will unfold/reveal some content below.
That said, if you apply the CSS properly and place it in the HEAD section of custom code, it works.
Place this code in the head section of the custom code box:
<style>
/* make the dropdown toggle text goes to next line */
.ddown-toggle-text {
white-space:normal !important;
word-break:break-all;
}
</style>
You’ll only see the effects upon publishing.
I think most people - including myself - use webflows drop-down for accordion FAQ sections because of one thing, which is - they auto close whenever user clicks outside the element, which in most cases suit the designs. - and yes you would need a small line of custom code for word-break for responsive styling.
Although i have tried to make my own with divs - the problem i am having, they don’t auto close- and for my cases toggling doesn’t work. Since I am not JS ninja - i think Dropdown hack is a valid option. Just my thought of it.
Hi Vincent,
Thanks for your reply! Yup, just as @Throatscratch says, this dropdown method for accordion FAQs was the solution I found recommended the most on the forums, which is why I used this one.
After plugging in the code above - the line break worked on tablets - but I found 2 major problems:
The accordion dropdowns disappeared completely on mobile view, but showing on tabled view. See here:
For some reason, it messed up the mobile navigation menu bar. Instead of showing just the burger icon, the regular navigation bar now shows up on the mobile version & can’t be removed. See here: 
Can you let me know why this happened? Thanks in advance for your help!
Again, thos dropdowns are intended to be 1. inside of a Navbar and 2. used a primary navbar items (short text most likely).
An advice of using such elements for an accordion element that is not a menu is not a good advice to follow.
You have already spent more time trying to fix this than you’d have spent following Interaction tutotrials and making your own solution.
Hi @vincent, thanks for your reply.
Actually, the website being built is extremely FAQ/accordion-heavy, as you can see. And to build the custom dropdowns with an interaction one by one would be extremely time consuming - I think this method it was meant for a short FAQ section, not a page with over 50 pages with a FAQ/accordion feature on each page. That’s why after researching for days what would be the best, most time-efficient option, most of the forum result pointed to using a dropdown button instead - which was even recommended by a staff/support member.
I’ve only tried to fix this for 2-3 hours, because it would be best to be able to fix what I’ve built, rather than build every single page and every single accordion using an interaction method all over again.
But from your curt and blunt reply I believe that’s what you’re implying I should do. So. Thanks for the earlier solve, and I’ll see what I can do next.
Cheers.
Reason for ddown items dissapearing on mobile view is because you have set “hidden” on Dropdown selector. Dont think it’s due the custom code 
As for the menu - Im still trying to get grasp around how you built it. Hopefully someone else figures out before me
Thanks so much! I fixed both, and I just had to rebuild the nav bar.
Glad you resolved. Good luck 
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
