Hello,
I’m new to the bootstrap framework. This particular issue has been holding me up for a few days. This came from a template inside the Bootstrap Studio.
Issue #1: Navbar is on the grey side. How can I make it black? The CSS doesn’t do anything.
Issue #2: The Mobile Navbar is on the the Main Computer Navigation Page.How can I get to only display on the Mobile or smaller screens?
See Code Below:
Bootstrap uses a snippet of SVG code to generate the three lines you see in the mobile hamburger menu. It’s actually a background image in a Span. That’s why nothing you do in the program changes the color. You actually have to copy the class to your custom stylesheet, which is this…
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
And then change the proper values in the SVG code to change the color of the lines. This video explains the process in detail…
Personally, I find it’s a lot simpler to just drag an icon into the Navbar Toggle component, then go into the icon library and choose an icon you like (for example, CSS icons > Menu.)
Then just delete the Span in the Navbar Toggle that contains the SVG (BTW - it’s the second Span. Don’t delete the first Span as that’s there for people who use screen readers to tell them that’s the hamburger menu.)
Once you’ve made the menu into an icon it’s basically like text, and you can easily style it with CSS like you’d style any other component… size, color, etc. You can even apply custom CSS to it to make it do things on hover, etc. If you really want to get creative, you can have it change from one icon to another when clicked.
There are many other alternate ways to replace the SVG in the hamburger menu. Some people use CSS to create lines with borders, and have all sorts of fancy things happen when the menu is clicked or hovered over.
Thank you this helped me! I had to remove conflicting scripts I realized that was another issue I had.
I can confirm @printninja solution works for future viewers!
