Cannot see the toggler button in Bootstrap 4 Navbar

I recently implemented the toggler button (hamburger icon) code in my HTML, but I'm facing an issue where the hamburger icon doesn't appear and looks blank when I resize my screen or view it on a smaller viewport.

Here's the snippet of my HTML:

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Friday Hero</a>
    <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">ABOUT <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </vli>
        <li class="nav-item">
          <a class="nav-link" href="#">ADVERTISE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link login" href="#">LOGIN</a>
          </li>
      </ul>

    </div>
  </nav>

I attempted to modify the CSS colors thinking that might be causing the issue, but the icon still fails to show up. Any suggestions on how to troubleshoot this problem?

htmlcssbootstrap-4

Answer №1

There appears to be a slight error:

button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"

The correct code should read as follows: 

button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"

A minor oversight in the spelling of "navbar-ligh"

Answer №2

I noticed a mistake in your code snippet: instead of using 

<button class="navbar-toggler navbar-ligh" ... \>
, it should be corrected to navbar-light

Answer №3

To modify the color scheme, simply insert the navbar-default class into your code and adjust it to the desired color by customizing the CSS properties within the navbar-default class. Integrate the specified classes into the button tag below:

<button class="navbar navbar-toggler navbar-light navbar-default" role="navigation"></button>

Then, transfer the remaining CSS codes to your CSS file for implementation.

.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Symfony 4 Forms: Enhancing User Experience with Prototypes

Recently, I've delved into Symfony 4 and encountered an issue with rendering a form featuring a ChoiceType Field with numeric choices. The goal is to allow the user to select a specific number of tags. Here's a snippet from my controller: class ...

phphtmlsymfonytwigsymfony4

From dividing into three sections to splitting into two sections

Struggling to create a list of images and descriptions in sets of threes at larger widths, transitioning to twos at smaller widths? The breakdown is causing chaos. Need help achieving clean one-half columns. Appreciate any assistance! ...

htmlcssimage

Issue with Bootstrap Angular dropdown menu malfunctioning within ChildRoute

Recently, I have been working on integrating admin bootstrap html with Angular. As part of this integration, I added CSS and JS files in angular.json as shown below: "styles": [ "src/styles.css", "src/assets/goo ...

angularbootstrap-4

Why should I set the width of the header to be larger than the body in order to fully cover it?

I've set my header width to 106% to span the entire page length, while the max-width for my body is kept at 95%. body { background-color: #333; max-width: 95%; font-family: ivyjournal, sans-serif; margin: 0; padding: 0; overflow-x: hidd ...

htmlcss

What is the best way to retrieve the content of HTML tags from a string using JavaScript or AngularJS?

I have a string with mixed content of HTML tags and text. Here is an example: var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height=" ...

javascripthtmlangularjs

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

Utilize Javascript to convert centimeters into inches

Can anyone help me with a JavaScript function that accurately converts CM to IN? I've been using the code below: function toFeet(n) { var realFeet = ((n*0.393700) / 12); var feet = Math.floor(realFeet); var inches = Math.round(10*((realFeet ...

javascripthtml

:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when mo ...

htmllistcss

Attempting to reach <p> from numerous web pages

Currently, I am working on a project where I need to extract text data from various websites. I have successfully managed to retrieve the text data using <p> tags. I would really appreciate any assistance with this task. Thank you! ...

javascriptpythonhtmlcsspython-3.x

Update issue detected with radio buttons in jQuery

Trying to get radio buttons in my code to update like other variables on the web page when their state changes. HTML <TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD> <TD><Input ...

jqueryhtmlajax

What is the rationale behind browsers on OSX not supporting the styling of HTML option elements?

As an OSX user, I primarily use Chrome and recently discovered that styling the HTML option element is not applied in any browser (Chrome, Firefox, Safari) on OSX. // HTML <select> <option class="option">Value 1</option> < ...

htmlcsswindowsmacos

Align image within box using Bootstrap

My project screenshot is displayed below. The red line separates the current state from the desired outcome. I am struggling to make it fullscreen, meaning it should extend all the way to the corners. Despite trying various methods with Bootstrap 4, I have ...

htmlcsstwitter-bootstrapbootstrap-4

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

javascripthtmlcssangularjs

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...

htmlcssreactjsnext.js

Is there a way to sort a table using a dropdown menu selection as a filter?

I am currently working on a project that involves a table with three columns, which are typically populated from a SQL database. My goal is to filter the third column based on the value selected from a dropdown menu. I came across a helpful tutorial on W3 ...

javascripthtml

Locate the nearest span element and update its CSS class

On my page, there is a section with the following code: <h5 class="text-center" id="findStore" style="width:260px"> <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId ...

javascriptjqueryhtmlcss

The mobile menu functions correctly on Jfiddle but is not functioning on the local server

I was working on a responsive mobile menu and used a toggleClass function to open the menu. It's functioning correctly in Jfiddle and below, but every time I click the nav icon in the live preview within brackets, nothing happens. I even tried it in a ...

javascriptjqueryhtmlcss

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView

I am currently utilizing Telerik's Vue wrappers for Kendo UI. With the TreeView control, both the jQuery version and MVC wrappers have a feature that allows a property to automatically check child checkboxes when the parent checkbox is checked. ...

htmlkendo-uivue.js

develop a submission form using jquery

I am looking to create a submit action where clicking the submit button does not refresh the page. Instead, the data inputted in div1 will be sent to kanjiconverter.php and displayed in div2 using <?php echo $newkanji ?>. There are three forms on thi ...

javascriptjqueryhtmlajax