The navbar toggler icon is not displaying

<header class="container">
    <div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center">
    <a href="#" class="site-logo"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    </div>

    <nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">work</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">about</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">artwork</a>
            </li>
            </ul>
        </div>
    </nav>
</header>

The .navbar-toggler-icon button does not display properly on the .navbar-toggler when the mobile menu is collapsed.

I am looking to move the Navbar button to the left position above it.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is the specific code snippet you need to use for implementing bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  <!--Main Navigation-->
      <header>
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
              <a href="#" class="site-logo navbar-brand""><img src="#"></a>
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                  <li class="nav-item">
                      <a class="nav-link" href="#">work</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">about</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">artwork</a>
                  </li>
              </ul>
            </div>
          </nav>


      </header>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

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

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

htmlcssbootstrap-4

"Troubleshooting: Handling null values in a web service when using jQuery

The API located at http://localhost:57501/api/addDatabase contains the following code snippet: [System.Web.Mvc.HttpPost] public ActionResult Post(addDatabase pNuevaConeccion) { pNuevaConeccion.insertarMetaData(); return null; ...

javascriptc#jqueryjson

dispatch email display Twitter Bootstrap notification utilizing Ajax

I'm trying to set up an email sending feature via a contact form. I want it to send the email and display a Bootstrap alert confirming that the email has been sent. Below is the HTML code: https://jsfiddle.net/6rfeas35/. Additionally, here is my PHP c ...

javascriptphpjqueryajaxtwitter-bootstrap

Managing PHP and AJAX: Strategies for handling and transmitting error responses

There are three main components involved in this process: An HTML form The AJAX connection that transmits the form data and processes the response from the PHP script The PHP script, which evaluates the data received, determines if it is valid or not, an ...

phpjavascriptxmlajax

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

htmlcsstwitter-bootstrap

Issue with HighCharts: Bar columns not extending to the x-Axis when drilling up

I am encountering an issue with HighChart/HighStock that I need help with. To illustrate my problem, I have set up a JSFiddle. The problem arises when a user drills down on a bar column, causing the y-axis to shrink and consequently making the x-axis appea ...

javascriptjqueryhighcharts

Navigating the grid layout in Material UI can be tricky to

I'm struggling to grasp the concept of the grid system in material UI. Within my grid container, I have two grid items that I want to be centered and occupy the entire width. The button element appears centered, but the typography element does not. A ...

javascriptreactjsgridmaterial-ui

Is there a way to trigger this pop-up after reaching a certain percentage of the page while scrolling?

I've been working on a WordPress site that features an "article box" which suggests another article to users after they scroll to a certain point on the page. However, the issue is that this point is not relative but absolute. This means that the box ...

javascriptphpjquerywordpressscroll

What steps are needed to enable the keyboard on a Otree application for mobile devices?

I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...

javascriptpythonhtmlotree

Can the serialization of AJAX URL parameters in jQuery be customized?

Is there a way to instruct jQuery or an AJAX call on how to format query string parameters other than writing a custom serializer? I am using a jQuery AJAX call and passing an object with URL parameters var params = {name: 'somename', favColors ...

javascriptjqueryajax

unusual problem with referencing jQuery mobile pages and implementing click functionality

I am facing a strange issue with my index.html page, which is a website built using jQuery Mobile. The problem arises when I click on a button multiple times within a form on this page - it generates an alert to confirm that the button is working and then ...

jqueryajaxhtmljquery-mobile

Guide on adjusting padding for jQuery Flot graph for improved styling

I am utilizing jQuery Flot to generate a basic graph. I do not want the axes to display on either side, but this is causing the points to be slightly cut off. Any suggestions on how to resolve this issue? $.plot('#'+id, [ { data: data.values ...

jquerycssflot

Tips on avoiding a div from causing its parent's mousemove event to activate if it is concealed

I have a collection of media content with a set of controls positioned above it. I am attempting to implement functionality where the controls will disappear when the user's mouse is inactive and reappear upon mouse movement. However, I am facing an ...

javascriptjquery

Clicking on text will open a popup div using HTML and CSS

I am looking to create a popup div instead of a popup window for my 'About' picture/page with the current button. Here is an example: ...

csshtmlpopup

Create a JavaScript function that accepts an argument and can be called both with and

Does anyone know how this code works? function animate(t) { sun.rotation.y = t/1000; renderer.clear(); camera.lookAt(sun.position); renderer.render(scene, camera); window.requestAnimationFrame(animate, renderer.domElement); ...

javascriptanimationthree.js

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

javascriptcssreactjssasszurb-foundation

What causes the "This page isn't responding" error to pop up in Edge and Chrome browsers while attempting to perform consecutive tasks in a web application built with Angular 8?

Trouble with Page Loading Whenever this error occurs, I find myself unable to perform any activities on that page. The only solution is to close the tab and open a new one. My current code allows me to navigate through an array list (Next and Previous) us ...

javascripttypescriptgoogle-chromeangular8microsoft-edge

Changing a string into a date format with the help of JavaScript AngularJS

My string is as follows: 13-12-2017 05:05 AM I am looking to convert it to the following format: Date 2017-12-13T05:05:00.000Z Attempted Solution: var mydate = '13-12-2017 05:05 AM'; var selectedDate = new Date(mydate); Upon logging the selec ...

javascriptangular

Implementing Expected Conditions using JavaScript calls in Selenium can greatly improve the reliability and efficiency of

Below is my Python Selenium code that downloads a shapefile of Rio de Janeiro. import time, os from selenium import webdriver from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.support.ui import WebDriverWait from selenium.web ...

javascriptseleniumselenium-webdriverwebdriverwaitexpected-condition

Looping through multiple table rows with AngularJS ng-repeat

I am currently working on making the code below functional, which involves data being retrieved from an API: ... <tbody ng-repeat="verbinding in data.connection" style="border-bottom:2px solid black;"> <tr> <td></td> ...

javascriptangularjsangularjs-ng-repeat