Navbar-toggler: Can I have text instead of hamburger icon?

Bootstrap Studio Help
1

I want to, instead of having the hamburger icon, put the word “MENU” in my navbar-toggler button. If this were Dreamweaver, I’d just do this:

<button...>MENU</button>

but I can’t figure out how to type in the .html field at the bottom of the studio.

Brand new user to the program and thought this was a thing I could do. What am I missing? Or what’s the proper approach to do this?

2

Drop a button between the Navbar Brand and the Navbar Toggle.
Type the text Menu on the button
Add the following data attributes to the button:
data-bs-toggle="collapse" and data-bs-target="#navcol-1"
the target id should be the same as the Navbar Collapse id.
Then delete the Navbar Toggle component
Your HTML will look like this

<nav class="navbar navbar-light navbar-expand-md">
	<div class="container-fluid"><a class="navbar-brand" href="#">Brand</a>
	<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#navcol-1">Menu</button>
	<div class="collapse navbar-collapse" id="navcol-1">
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
		</ul>
	</div>
</div>
</nav>
3

You can change it with CSS

Something like this

.navbar-toggler-icon {
  width: 2.5em;
  height: 1.5em;
  background-image: none;
}

.navbar-toggler-icon:before {
  content: "Menu";
  font-size: .8rem;
}
1 Like
4

How do I add the pseudo class :before in the style editor?

Edit: Nevermind, figure it out. It works! Thanks a lot for the assist.

5

Unless I’m missing something, this seems incredible straightforward. Just drop a new Span component inside the Navbar Toggle and delete the existing hamburger Span component.

Edit and style the toggler and your new Span text as desired to get the look you want (font size, toggler padding, height, etc.) If you just want to see the text without the borders, edit the appropriate CSS classes and change the border and box shadow to none

image

6

That was certainly an option. I considered bringing the Brand anchor tag inside the toggler, but didn’t want a dead link.

7

You can either create a new Navbar Toggler using a button (as per Kuligaposten’s suggestion) or modify the existing toggler (as per richards suggestion) but I can’t see a simpler way than just replacing the existing SVG span with a text span and then styling the text and Toggler via CSS.

You can even drop an Icon inside the Toggler and then use any of the thousands of different icons available (I’ve done that many times) or drop an Image component inside and then use an SVG image from a site like svgrepo or make your own in a vector program like Adobe Illustrator. Then you can easily size it, or even use CSS filters on it.

image