Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJASON PETERSEN
14,266 PointsBootstrap Split Toggle Dropdown showing, despite .visually-hidden
I'm trying to do a split toggle dropdown nav menu. The 'toggle dropdown' should be hidden, but is visible despite having a class="visually-hidden". How do I make it not visible?
Code was copied/pasted straight from the bootstrap website, only
Here's the code for the dropdown menu. (I'm actually doing a dropup, but same deal).
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">
Other Confs
</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<a class="dropdown-item" href="">CSS Conf</a>
</ul>
</div>```
JASON PETERSEN
14,266 Pointsbootstrap 5.1, the most recent one
1 Answer
JASON PETERSEN
14,266 Pointsjb30,
that worked actually. It needed sr-only. I'm surprised it didn't work since I updated the javascript file and copied this dropdown off the website. but idk.
Thanks for your help!
jb30
44,806 Pointsjb30
44,806 PointsAre you using Bootstrap 4 or Bootstrap 5? If you are using Bootstrap 4, you could try adding the class "sr-only".