how to change color of hamburger in bootstrap4

Question

.

I need to change color of stick to white while scroll in responsive version, but now color is black while scroll. How can change color to white? This is 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>

This is CSS:

.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;
    }
}

and I have this code via code element:

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);

and I wrote this:

 $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");
        }
    });

but it doesn't work, what is the problem?

Maybe I have some errors in js code? How can I do that? Maybe I have some errors in js code?

did u try `$('.navbar-toggler').css('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)'` yet? — Ramon de Vries, Dec 18 '18 at 10:02
@RamondeVries you mean I need to past in if statement? it didn`t help me — , Dec 18 '18 at 10:05
You haven't posted a question or code that is clear. Try to create a snippet with the code you've posted. — Carol Skelly, Dec 18 '18 at 11:49

score 1 · Answer 1 · answered Mar 21 '19 at 17:59

you can change the twitter bootstrap navbar hamburger icon by just changing some CSS values, it's actually an SVG image that contains RGB color values, so it's very easy to change

here is a fiddle that shows you how to do it, I made a flashy green hamburger as example: https://jsfiddle.net/ds3o8zek/1/

So if your want to change the navbar hamburger color, all you need to do, is put the following lines into your own style sheet and set the colors to whatever you want:

.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 stylesheet here has three parts, the SVG icon which represents the hamburger, look inside of the SVG code in the attribute background-image, there is a section stroke='rgba(75, 255, 0, 1)', this part sets the color of the SVG, the first three values are RGB color values and the fourth one is the opacity. The second css rule changes the border color of the part around the three lines. And finally I also adapted the color for the outline.

as html code I took the example from the bootsrap documentation, note that I added a new class called "fancy-toggler", which you find 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>

score -1 · Answer 2 · answered Dec 18 '18 at 10:05

-1

You can choose any hamburger icon from flaticon and download it. After downloading convert the icon in image base64 format and override CSS background property for this class->".navbar-dark .navbar-toggler-icon" with new background url.

answered Dec 18 '18 at 10:05

Raviraj

1
1

how to change color of hamburger in bootstrap4

2 Answers2