Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Everything seems to be working well with the navbar initially, but when resizing the screen to a smaller resolution, all the navigation items disappear and the "hamburger icon" fails to appear.

<nav class="navbar navbar-custom navbar-expand-md fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="images/girlsinthegame.png" width="10%"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
htmlcssbootstrap-4

Answer №1

On the right side, there is a button without any color, making it difficult to see. To make it more visible, add navbar-light.

Check out your demo with code - click on the top right corner

https://i.sstatic.net/mj17J.png

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom navbar-expand-md fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="https://www.girlsinthegame.org/wp-content/uploads/2019/08/GIG_25th_Logo-Clear-BG71128.png" height="50px"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Solution Implemented 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom navbar-expand-md navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="https://www.girlsinthegame.org/wp-content/uploads/2019/08/GIG_25th_Logo-Clear-BG71128.png" height="50px"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

htmljquerycsstwitter-bootstrapbootstrap-4

incorporating numerous interconnected javascript files within a single html document

I have a pair of JavaScript files (file1, file2). File1 utilizes a class that is defined in file2. Can I include these files in an HTML document like this: <script type="text/javascript" src="file1.js"></script> <script type="text/javascrip ...

javascripthtmldependency-management

Having trouble displaying success messages following a successful upload of data through jQuery AJAX

Having recently delved into the realms of Jquery, Ajax, and PHP, I took on a task to create a program that uploads files to a database as blob files. Fortunately, I managed to successfully upload the file to the database. However, I encountered an issue wh ...

phpjqueryajaxhtml

Aligning multiple spans vertically within a div of varying height (ui-select-multiple)

I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...

htmlcssvertical-alignmentui-select

Incorporating a transparent icon onto an HTML background

I'm struggling to place a transparent white envelope icon on a green background. I don't understand why it's not working, especially when the telephone icon worked fine. Side Question.: Any recommendations for how to add something above the ...

javascripthtmlcss

Combine multiple jQuery click functions into a single function

One issue I am facing on my website is that there are multiple modules, each of which can be disabled by the user. The problem lies in the fact that I have a separate script for each module. Hence, my query: How can I combine these scripts into one (perhap ...

javascriptjqueryhtml

Adjust the autofocus to activate once the select option has been chosen

Is there a way to automatically move the cursor after selecting an option from a form select? <select name="id" class="form-control"> <option>1</option> <option>2</option> <option>3</option&g ...

javascripthtml

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

What is the best way to incorporate a search feature within Bootstrap cards?

I've been struggling to incorporate a search feature within my bootstrap cards. Despite trying various online methods, none have proven successful for me so far. Below is my HTML code - any assistance in implementing a search filter into my app would ...

javascriptpythonhtmlcss

What is causing the Bootstrap 5 navbar to not collapse?

Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...

htmlcsstwitter-bootstrapsassbootstrap-5

Activating/diverting DIV elements through specific functions (on a WordPress website)

I have a stronger background in HTML and CSS, but I'm struggling with coding the functionality I want to see on a WordPress page. My goal is to create a page that displays upcoming events for a specific province or region of Canada, with an interactiv ...

jqueryajaxwordpresshtml

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

I am facing an issue where only one element is getting affected when trying to remove classes from multiple elements if certain email input requirements are met. Can someone help me understand why this is happening? Here is the code snippet: const emailI ...

javascripthtmlcssvalidation

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...

htmlpython-2.7dockerdockerfile

Do you need the Tooltip Module for Angular-bootstrap popover to work properly?

"Could it be possible that my popover isn't working because it requires the tooltip module just like the Bootstrap jQuery plugin?" Is this the reason my popover isn't functioning as expected? What exactly is the tooltip module and do I need to i ...

javascripthtmlangularjstwitter-bootstrappopover

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

htmlvue.jsvuejs2

Designing in Ionic 3.x: Implementing Ion-Icon with a gradient backdrop (ion-chip)

Is there a way to add a gradient background to an icon? I attempted to nest the ion-icon within an ion-chip, like so: <ion-chip class="my-chip"> <ion-icon name="basket></ion-icon> </ion-chip Then, in the .css file: ...

htmlcsssassionic2ionic3

What is the best way to have text fit perfectly into a table cell?

In my asp.net table, the first column contains captions for each row of data. The length of these captions varies, with different amounts of words in each one. I am looking to align the first letters of each caption at the beginning edge of the cells (left ...

htmlcssasp.net