Bootstrap menu icon disappears after changing colors

As a beginner in html, css, js, and bootstrap 4, I have been working on a website to practice my skills. I was able to modify the colors, text, and font-size of my bootstrap 4 navbar successfully. However, I encountered an issue where the hamburger symbol disappears and my options are lost when scaling down the page.

The only changes I made were removing the bg-light class to adjust the color and adding a custom class to change the text color.

You can view my code here.

             .navbar-nav {
              background:#4287f5;
              }

              .navbar-brand {
               background:#4287f5;
                     }

                .navbar-brand.custom{
                  color:#FFFFFF;
                   font-size:25px
                  /* border-right:2px solid black; */

                        }

                         .navbar {
                          background:#4287f5;
                               }

                           body {
                           font-family: 'Poppins', sans-serif;
                           /* font-weight:700; */
                            }

                          .navbar-nav li a {
                           color: #FFFFFF;
                           font-size:20px;
                              }

Answer №1

Create a hamburger menu using HTML and CSS instead of relying on an image of a hamburger.

.navbar, .navbar-nav {
  background: #4287f5;
}
.navbar-brand.custom {
  color: #FFFFFF;
  font-size: 25px
}
.navbar-toggler {
  padding: .25rem .5rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.navbar-togglebar {
  background: #FFFFFF;
  display: block;
  width: 25px;
  height: 2px;
  vertical-align: middle;
  margin: 5px;
}
.navbar-nav li a {
  color: #FFFFFF;
  font-size: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand custom" href="#">Jesse</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact me</a>
      </li>
    </ul>
  </div>
</nav>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer №2

Below is the code you can use to style the navigation burger icon:

/*Initial styling for burger icon*/
button.navbar-toggler.navbar-dark.collapsed {
    background: #000;
}

/*Styling when toggled*/
.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
    background: #000;
}

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

Steps for modifying form entries in a modal

I have a form that is accessed via a modal as described in the following code snippet. By clicking on new-lesson-plan-modal, I am able to use the generated form to input a new post entry, which will then be displayed back on the HTML. My query revolves a ...

Preventing Text Truncation in THREE.js Texture Created from 2D Canvas

Many people tend to use the 2D canvas texture method for creating text billboards, sprites, and overlays in THREE.js scenes instead of relying on imported image files. You can check out an example by Lee Stemkoski here. However, I have noticed that when a ...

The custom icon font sourced from Flaticon and hosted on a separate server is not functioning properly

I recently obtained a unique icon font from Flaticon and decided to incorporate it into a SaaS online store. Since I don't have direct access to the shop's files, I attempted to host the font on an FTP server and integrate it on a demo page: here ...

Tips on modifying anchor tag attributes in cross-domain iframe source URLs to open in a new tab

Is there a way to change the target attribute of an iframe child anchor tag from "_blank" to "_parent" or completely remove it? I'm looking for a script that can help me achieve this. How can I modify or delete properties of an anchor tag within an i ...

Using jQuery to decrease the transparency of an image when the mouse hovers over it

I'm trying to set it up so that when you hover over an image, the opacity decreases by half. I know I must be making a simple mistake here, but I just can't figure out what it is. Any suggestions would be greatly appreciated. http://jsfiddle.net ...

The alignment of the image in the Bootstrap dropdown menu is disrupted

Hello! Currently, I am utilizing this bootstrap template from . However, I am encountering an issue with the dropdown menu alignment when I try to add an image to it. Is there anyone who can provide some assistance with this problem? The complete code was ...

What is the best way to delete table rows based on their assigned class?

Within my HTML document, there is the following structure: <table id="registerTable"> <tr class="leaderRegistration"> <!--table contents--> </tr> <tr class="leaderRegistration"> <!--table conten ...

Issues are occurring with the @font-face css for the Futura Bk BT Bok.ttf font file

Is there a way to incorporate the 'Futura Bk BT Bok.ttf' font into my website using the CSS @font-face rule? Here is a snippet of my current CSS: @font-face { font-family: abcd; src:url('Futura Bk BT Bok.ttf') format('true ...

Ensuring that Bootstrap rows fill the entire height within a column

While working on a template with nested rows and columns in Bootstrap, the layout ended up looking like this: <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">Truck Number</div> ...

The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon. svg { display: inline-block; height: 16px; width: 16px; margin: 2px 0; ...

The style from 'http://localhost:2000/cssFile/style.css' was rejected because its MIME type was 'text/html'

Currently, I am attempting to include my style.css file in the home.ejs file being rendered by express.js. However, I keep encountering the following error: Refused to apply style from 'http://localhost:2000/cssFile/style.css' because its MIME t ...

Is it possible that the HTTP module's deflate compression is only effective on specific CSS files and not all

I've been working on setting up mod deflate and gzip on my server, and while it's mostly functioning smoothly, I've noticed that not all files are being caught. It's not a matter of missing ALL javascript or CSS, but rather that some ar ...

Dismiss ngx bootstrap modal without interfering with other bootstrap modals in Angular 10

When dealing with multiple ngx bootstrap modals, I encountered an issue where closing the top modal would also close the underlying modal. Ideally, only the top modal should close without affecting the others. Is there a fix for this behavior? ...

Launching Toasts with Bootstrap 4

I've been working with toasts in Bootstrap 4 and one thing has been bothering me: When I initialize the toast like this: <div class="toast my-3" data-delay="2500"> <div class="toast-header text-dark"> //fill this later &l ...

By simply clicking the link, the content comes to life with animation

Is there a way to replicate the scrolling effect seen on this website ? The content shifts to the left and reveals new site content. Please excuse my English. ...

Spring Boot with Thymeleaf failing to load Bootstrap 4 styles

I'm encountering an issue with Bootstrap 4 as the styles are not loading into my page. My tech stack includes Spring Boot, Maven, and Thymeleaf. Within my HTML file, I have included the following code: <link rel="stylesheet" type="text/css" th:hr ...

Finding and removing the last portion of the innerHTML can be achieved by employing specific techniques

Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

Finding the value of a span tag using a specific CSS class with jQuery

How can I retrieve the value of a span tag based on its css class using jQuery? <span class="page-numbers current">3</span> I attempted to do so with the following code: var pageno = $(".page-numbers current").val(); alert(pageno); Howeve ...

Angular iteration does not display column as undefined

For the past 4 hours, I've been wrestling with this challenge! :D The issue at hand is that I'm attempting to create a form and dynamically add rows with input fields. Here's how it looks: </div> <a ng-click="add_r ...