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 trial

CSS Bootstrap Basics Using Bootstrap Components Inline Navs and Dropdown Buttons

Posted by JASON PETERSEN
JASON PETERSEN
14,266 Points

Bootstrap 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>```
jb30
jb30
44,805 Points

Are you using Bootstrap 4 or Bootstrap 5? If you are using Bootstrap 4, you could try adding the class "sr-only".

JASON PETERSEN
JASON PETERSEN
14,266 Points

bootstrap 5.1, the most recent one

1 Answer

JASON PETERSEN
JASON PETERSEN
14,266 Points

jb30,

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!