Give color to toggle menu icon when the menu is in compact mode

Question

I am trying to give the background color to menu toggler icon , when the html page make compact to mobile view. Since the menu back ground color is set to white , if the screen make compact , the menu toggler icon cannot be seen. So I am trying to give color background or to give color to its border.

<nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark" id="main-nav">
                <div class="container">

                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">
                                    Our
                                    Project
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
</nav>

Then in custom.css file , I given the color, still not working.

.custom-toggler.navbar-toggler {
    border-color: rgb(255,102,203) !important;
}

Answer 1

Hi @Polachan Paily ,

I am trying to give the background color to menu toggler icon , when the html page make compact to mobile view. Since the menu back ground color is set to white , if the screen make compact , the menu toggler icon cannot be seen. So I am trying to give color background or to give color to its border.

 .custom-toggler.navbar-toggler {    

      border-color: rgb(255,102,203) !important;  
  }  

By using the above code, you have already added the border for the navbar-toggler button. Like this:

To change the toggle menu icon color, you can customize the icon, change its background image. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)' value in the SVG data:

You can download the CSS style from here. 160968-cssstyle.txt

Then, the result is like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

typically the toggle is a font character or svg image (depending on bootstrap version) appended via css. you you need to override its class. just inspect element to see full css. you probably want to set its color or fill depending on the style.