Problem/Motivation

Hi, I recently installed Bootstrap Barrio on my site and while I was setting it up I noticed the hamburger menu collapse icon was missing on smaller screen sizes (mobile). It is invisible but if you click it it successfully opens the navigation.

Proposed resolution

I have been looking at the code and found that the button with the <span class="navbar-toggler-icon"></span> inside for the navigation is not showing because the navbar-light or navbar-dark class needs to be added to the button. I tried adding navbar-light to the parent button and the icon showed. This is probably a bug in Barrio because the navigation was generated automatically and I did not write this code. If it is not an error, how can I add this class or make the hamburger menu icon appear?

(Bootstrap classes work fine on the rest of the site as well as jQuery.)

CommentFileSizeAuthor
AFTER CLASS MANUALLY ADDED.png35.54 KBelij
Screenshot (75).png34.44 KBelij
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

elij created an issue. See original summary.

elij’s picture

elij CreditAttribution: elij commented

Note that I am running this on Drupal 9.0.1

elij’s picture

elij CreditAttribution: elij commented

I've been checking back regularly and don't see any activity on this issue, has anyone found a fix?

quinns’s picture

quinns CreditAttribution: quinns commented

A workaround is to add the SVG background image into your theme's CSS (this is copied from Bootstrap's source):

.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
AngryBunny’s picture

AngryBunny CreditAttribution: AngryBunny as a volunteer commented

What quinns provided worked for me (well after I changed the rgba values from white to black!)

gisle’s picture

gisle
he/him
Primary language Norwegian Bokmål
Location Norway
CreditAttribution: gisle at Hannemyr Nye Medier AS commented
Version: 8.x-4.29 » 5.0.1

This problem is also present in the latest stable release, updating version number.

I am running Drupal 8.9.2, so it does not depend on Drupal version.

The workaround suggested by quinns in comment #4 (adding the class to the subtheme's css/style.css) works for me.

hatuhay’s picture

hatuhay CreditAttribution: hatuhay commented
Category: Bug report » Support request
Status: Active » Closed (works as designed)

According to Bootstrap docs Toggler the icon will take color based on parent nav link class, light or dark.
If you do not define any of thiose on your subtheme settings, then you need to add your own toggler icon using your style sheet.

tanc’s picture

tanc
he/him
Primary language English
Location Italy
CreditAttribution: tanc as a volunteer commented

To clarify a little more, you need to edit your subtheme's settings and you'll see a section at the top of the form called "Bootstrap settings" which will be a vertical tabbed list. Under "Components" you can expand "Navbar structure" and there you need to choose an option other than "Default" for "Navbar link color". This will make the 'burger icon' show.

A third option is to add it in the field "Custom classes for Navbar", for example navbar-light

Another option is to modify your theme's templates and add one of the bootstrap classes (e.g. navbar-light)on an ancestor of the .navbar-toggler-icon element.

jglynn’s picture

jglynn CreditAttribution: jglynn commented

If you are using the AdvAgg module to compress css the toggler svg will not appear. Somehow the svg text gets messed up