Ways to customize the color of the hamburger icon in Bootstrap 4

https://i.sstatic.net/kSuVW.jpg.

Need to update the stick color to white when scrolling in responsive version, but currently it remains black. How can I change the color to white? Here is the HTML:

<div class="menu_area">
                        <nav class="navbar navbar-expand-lg navbar-light">
                            <!-- Logo -->
                            <a class="navbar-brand" href="#">
                                <img src="img/svg/black.svg" class="lia-logo" style="margin-top: -15px;width: 48px; height: 38px;">
                            </a>


                           <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="zina"></span></button>


                            <!-- Menu Area -->
                            <div class="collapse navbar-collapse" id="ca-navbar">
                                <ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;">
                                    <li class="nav-item active"><a class="nav-link" href="#home" style="color: #000;">Home</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#about" style="color: #000;">About</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#features" style="color: #000;">Why Lia</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#application" style="color: #000;">Application</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#support" style="color: #000;">Support</a></li>
<!--                                <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>-->
                                    <li class="nav-item"><a class="nav-link" href="#contact" style="color: #000;">Contact</a></li>
                                </ul>
<!--
<!--
                                <div class="sing-up-button d-lg-none">
                                    <a href="#">Sign Up Free</a>
                                </div>-->
                            </div>
                        </nav>
                    </div>

The CSS for this section is as follows:

.menu_area .navbar-brand {
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
    padding: 0;
}


.menu_area .navbar-brand:hover,
.menu_area .navbar-brand:focus {
    color: #fff;
}

@media (min-width: 768px) and (max-width: 991px) {
 #ca-navbar {
        padding: 30px;
        color: red;
        border-radius: 3px;
        background: linear-gradient(to right, #007ADF, #00ECBC);      
        text-align: left;
    }
}
@media (min-width: 320px) and (max-width: 767px) {
#ca-navbar {
        padding: 20px;
        border-radius: 3px;
/*      background-color: #CFD1D2;*/
        background: linear-gradient(to right, #007ADF, #00ECBC);      
        text-align: left;
    }
}

The code that seems to be causing an issue is the following JavaScript snippet:

background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);

You have also included this JavaScript code:

 $window.on('scroll', function () {
        if ($window.scrollTop() > 48) {
            $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        } else {
           $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
    });

If you're facing issues with this code, double-check for any errors. Have you tried troubleshooting the JavaScript code for potential bugs or mistakes?

htmlcssbootstrap-4responsive

Answer №1

Modifying the appearance of the Twitter Bootstrap navbar hamburger icon is a simple task that involves adjusting some CSS properties. This icon is actually an SVG image containing RGB color values, making it easy to customize.

I have created a demonstration on jsfiddle that showcases how this can be done. In the example, I changed the default icon to a vibrant green hamburger: https://jsfiddle.net/ds3o8zek/1/

To change the color of the navbar hamburger icon, you just need to add the following lines to your own stylesheet and adjust the colors as desired:

.fancy-toggler.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(75, 255, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.fancy-toggler.navbar-toggler {
  border-color: rgb(75, 255, 0);
}

.fancy-toggler.navbar-toggler:focus {
  outline-color: rgb(75, 255, 0);
}

The provided stylesheet consists of three parts: the SVG icon representing the hamburger, the adjustment of the border color around the icon, and the modification of the outline color.

In the HTML code sample from the bootstrap documentation, a new class "fancy-toggler" has been added in alignment with the styles defined in the stylesheet above:

<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="fancy-toggler 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 class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer №2

Select a hamburger icon of your choice from flaticon and save it to your device. Once saved, convert the icon into an image using base64 format. Finally, replace the CSS background property for the class ".navbar-dark .navbar-toggler-icon" with the new background url.

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

The Javascript code for creating a timeline animation is malfunctioning

I am trying to implement a timeline where hovering over a specific point triggers a display showing more information about that particular historical event. Despite seeming like a simple task, I am struggling to get it to function properly. As a newcomer ...

javascripthtmlcss

Python - Using Selenium to update the value in an input field

I've run into an issue while attempting to change the value of an input field in a form using Selenium and Python. Check out the time picker My intention is to use .sendKeys() for each component (Hour, Minutes, Seconds, AM/PM). Here is the code snip ...

pythonhtmlselenium

The single answer input field is not displaying as a readonly text input

Here is a jsfiddle link Please pay attention to Question 2 in the jsfiddle table, as it contains only one answer. In the jquery function, I have attempted to make the text input under the Marks Per Answer column readonly if a question has only one answer ...

phpjqueryhtml

Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup. Below is the element when it's displayed: <div class="imp-too ...

javascriptjqueryhtmlcss

How can I align images of varying sizes to the bottom using Bootstrap 4 or CSS?

I'm having an issue with CSS align-xxxx:bottom not working. I want to align images of different heights at the bottom. .width-book{ width: 100px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="s ...

csstwitter-bootstrapbootstrap-4

align image vertically within a floated container

There are 5 floated divs with heights stretched to 100% of the document height using JavaScript. Each of the 5 divs contains an img element. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <lin ...

javascripthtmlcss

Having trouble getting a Bootstrap 4 select form field to function properly in a Django project

Recently, I delved into the world of Django and decided to incorporate a Bootstrap4 form. To my surprise, when using input fields for text and date, everything worked seamlessly - data was successfully saved in the Django admin panel. However, things took ...

djangoformsbootstrap-4html-select

`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way. My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered. Despite setting the width at 25%, I am encountering some issues with alignment. Please check out the code ...

htmlcssflexbox

Issue with Chrome on android causing local website javascript and css to not load properly

The issue I am experiencing is unique to Chrome for Android when accessing a local website. Interestingly, the site functions perfectly on Firefox for Android but encounters problems on Chrome. Specifically, on my website , there is a download link for a ...

javascriptandroidcssgoogle-chromelocal

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

htmlcss

Obtain both the key and value from an Object using Angular 2 or later

I have a unique Object structure that looks like this: myCustomComponent.ts this.customDetails = this.newParameter.details; //the custom object details are: //{0: "uniqueInfo", // 5: "differentInfo"} The information stored in my ...

htmlangulartypescript

Reducing the gridview size with the help of the Bootstrap framework's stylesheet

Seeking advice on adjusting the size and alignment of a Gridview in asp.net web forms using bootstrap stylesheets. Here's the code snippet in question: <table class="table table-sm" > <a ...

htmlcssbootstrap-4flexbox

What is the best way to retrieve a table from an HTML page and convert it into a data frame using XML and Rcurl in R programming?

Can someone help me convert a table on the Forbes website into a data.frame? Click here to access the table ...

htmlrxmlrcurl

Convert a fixed Jquery div to absolute positioning when it reaches the end of the page

I've implemented a Jquery code that adds a fixed class to a div when scrolling down. However, I now want to remove this fixed class when it reaches the bottom of the page and replace it with a new one that includes position:absolute; and margin-bottom ...

jquerycss

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

javascriptcssreactjsnext.jstailwind-css

Utilizing numerous 'select' HTML elements with Vue.js and Materializecss

I've been working on creating an HTML multiple select form element with Vue.js and encountered an interesting issue. Everything was functioning perfectly following the guidance provided in this resource. However, when I decided to incorporate the Mate ...

htmldrop-down-menuvue.jsvuejs2materialize

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...

csssafarihtml-email

Text that appears as an HTML button is displayed after being compiled using the $

I am attempting to generate a pop up dialog with two buttons using JS code in angular. The script below is what I am using to create the buttons... var html = $('<button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="c ...

javascripthtmlangularjsbuttondialog

My DIV is not floating to the right as expected. What could be the issue?

I'm having trouble positioning the timer to float on the right top side of the logo. Even though using the regular style="float:right" works perfectly... <div id="whole_page" /> <div id="header" /> <?php echo " ...

csshtml

Vertically animating an image using jQuery

I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...

javascriptjqueryhtmlcssjquery-animate