Change (Replace) Bootstrap 4 navbar toggler icon with Close (X) icon using CSS

RichardSa
 
on Dec 07, 2021 05:55 PM
Sample_186353.zip
6190 Views

How can I make my toggle button icon to change to "X" when I click to open navigation list items?

I am using bootstrap 4, so will it work as bootstrap 4 toggle icon is different

here is my html

                <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
                    <a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
                        <i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
                        <span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
                                    <i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="About.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
                                </a>
                            </li>
                            <li class="nav-item">
                                <asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
                            </li>
                        </ul>
                    </div>
                </nav>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 08, 2021 04:27 AM

Hi RichardSa,

Refer below example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Cosmic</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
    <link href="http://fonts.cdnfonts.com/css/renogare" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <style type="text/css">
        .wrapper {
            background-repeat: no-repeat;
            height: 1000px;
            background-position: center;
            background-size: cover;
            overflow: hidden;
            position: relative;
        }

        .footer {
            width: 100%;
            position: fixed !important;
        }

        .top {
            height: 100%;
            background-size: cover;
            background-color: rgb(245, 245, 245);
            width: 100%;
            z-index: 100;
        }

        .navbar-nav {
            margin-left: auto;
        }

        #navbarNav li a {
            color: #eeeeee;
            font-family: 'Be Vietnam', sans-serif;
            font-size: 11pt;
            font-weight: bolder;
        }

        .nav-item {
            float: right;
        }

        .navbar-nav .active {
            color: #eeeeee;
        }

        #navbarNav li a::after:hover {
            color: #eeeeee;
        }

        .navbar-brand:hover {
            color: #eeeeee;
        }

        .container2 {
            width: 100%;
        }

        .container {
            width: 100%;
        }

        .title {
            line-height: 1.33;
            letter-spacing: -.5px;
            margin-bottom: 5px;
            margin-top: 0%;
        }

        .desc {
            margin-bottom: 50px;
            margin-top: 12px;
            line-height: 1.7;
        }

        @media(min-width:992px) {
            .col-md-6:not(:first-child) {
            }

            .col-md-6:not(:last-child) {
                border-right: 1px solid #200662;
                border-left: 1px;
            }

            .form-horizontal {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top: 0%;
            }
        }

        #btnstart {
            border-radius: 5px;
            background-color: #32657c;
            font-weight: 500;
            font-size: 12pt;
        }

            #btnstart:hover {
                color: #eeeeee;
                background-color: steelblue;
            }

        #working {
            border-radius: 5px;
            background-color: #32657c;
            font-weight: 500;
            font-size: 11pt;
        }

        .img-circle {
            border-radius: 50%;
            float: left;
        }

        #imgone {
            width: 100%;
            height: auto;
        }

        @media screen and (min-width: 360px) and (max-width:640px) {
            #imgone {
                width: 100%;
                height: auto;
            }

            #boldhead {
                font-size: 17pt;
            }
        }

        .frontimg {
            width: 100%;
            height: auto;
        }

        .image-fluid {
        }

        .column {
            float: left;
            width: 33.33%;
            padding: 5px;
        }

        .row::after {
            content: "";
            clear: both;
            display: table;
        }

        @media screen and (max-width: 500px) {
            .column {
                width: 100%;
            }
        }

        #newclients {
            font-family: 'Be Vietnam', sans-serif;
        }

        span.step {
            background: #ececed;
            border-radius: 1.6em;
            -moz-border-radius: 1.6em;
            -webkit-border-radius: 1.6em;
            color: #ffffff;
            display: inline-block;
            font-weight: bold;
            line-height: 2.5em;
            text-align: center;
            width: 2.5em;
            margin-left: auto;
            margin-right: auto;
            font-size: 20pt;
        }

        #dots {
            width: 100%;
            height: auto;
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0.2;
            margin-top: -29%;
        }

        #img6 {
            width: 100%;
            height: 200px;
        }

        #img7 {
            width: 100%;
            height: 200px;
        }

        #img0 {
            width: 100%;
            height: 200px;
        }

        @media screen and (min-width: 360px) and (max-width:640px) {
            #qr {
                display: none;
            }
        }

        .navbar-toggler > .close {
            display: inline;
        }

        .navbar-toggler.collapsed > .close, .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 50) {
                $('.navbar').css('background', '#32657c');
                $('.nav-link').css('color', '#eeeeee');
                $('.navbar-brand').css('color', '#eeeeee');
                $('#newclients').css('color', '#eeeeee');
                $('#newclients').css('border-color', '#eeeeee');
                $('#newclients').css('background', '#32657c');
            }
            else {
                $('.navbar').css('background', 'transparent');
                $('.nav-link').css('color', '#32657c');
                $('.navbar-brand').css('color', '#32657c');
                $('#newclients').css('border-color', '#32657c');
                $('#newclients').css('color', '#32657c');
                $('#newclients').css('background', 'transparent');
            }
            if (!$('#dvMobile').is(':hidden')) {
                $('.navbar-nav').css('background', '#32657c');
                $('.nav-link').css('color', '#eeeeee');
                $('.navbar-brand').css('color', '#eeeeee');
                $('#newclients').css('color', '#eeeeee');
                $('#newclients').css('border-color', '#eeeeee');
                $('#newclients').css('background', 'transparent');
            }
        });

        $(function () {
            MobileNavColor();
        });

        function MobileNavColor() {
            if ($('#dvMobile').is(':hidden')) {
                $('.navbar').css('background', 'transparent');
                $('.nav-link').css('color', '#32657c');
                $('.navbar-brand').css('color', '#32657c');
                $('#newclients').css('border-color', '#32657c');
                $('#newclients').css('color', '#32657c');
                $('#newclients').css('background', 'transparent');
            } else {
                $('.navbar').css('background', 'transparent');
                $('.navbar-nav').css('background', '#32657c');
                $('.nav-link').css('color', '#eeeeee');
                $('.navbar-brand').css('color', '#eeeeee');
                $('#newclients').css('color', '#eeeeee');
                $('#newclients').css('border-color', '#eeeeee');
                $('#newclients').css('background', 'transparent');
                $('.navbar-toggler').css('background', '#32657c');
            }
        }
    </script>
</head>
<body style="background-color: #f9fcfe; font-family: Roboto;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div class="top">
                <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
                    <a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
                        <i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
                        <span class="close">X</span>
                        <span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
                                    <i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="About.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
                                    <i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
                                </a>
                            </li>
                            <li class="nav-item">
                                <asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
                            </li>
                        </ul>
                    </div>
                </nav>
                <div id="dvMobile" class="visible-lg hidden-xl d-block d-lg-none"></div>
                <div>
                    <img id="dots" alt="dotted" src="images/curly.jpg" />
                    <div class="line" style="color: #fff;">
                    </div>
                    <div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
                        <div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
                            <br />
                            <div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
                                <label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
                                <br />
                                <p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
                                    Start yourshopping for your kids anywhere and anytime!
                                </p>
                                <br />
                                <asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
                                <br />
                                <br />
                            </div>
                        </div>
                        <div class="col-sm-4" id="qr" style="margin: 0 auto;">
                            <div class="container-fluid p-3 mb5 bg-transparent rounded">
                                <i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <br />
            </div>
            <div class="back-cont" style="background-color: #eeeeee;">
                <div class="container-fluid" style="text-align: center; padding: 30px;">
                </div>
                <br />
            </div>
            <div class="contain" style="margin: 0 auto; padding: 10px;">
                <br />
            </div>
        </div>
    </form>
</body>
</html>

Screenshot