skip to Main Content

Currently i am facing an issue with my desired CSS effects. So currently the problem i am facing is that i have a navbar toggle which is in the color black, when i click on the navbar toggle i want it so that when it expands, the navbar background color will be red, then when i click on it and retract the navbar, the color will went from red back to black. But current issue is it only turns red once i click on it, when i release it will turn back to black. The script i was suggested is this below.

[Retract image](https://i.sstatic.net/51eTxqsH.png)

[Expand image](https://i.sstatic.net/G9d5gCQE.png)

[Navbar toggle when click/holding click](https://i.sstatic.net/TMFRw5GJ.png)

PHP Laravel

<header class="header header_style_01">
    <nav class="megamenu navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" id="toggle-button" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/"><img src="images/logos/smsGuru_logo.png"
                        height="60px" alt="sms guru" title="cheap sms"></a>
            </div>



            <div id="navbar" class="navbar-collapse collapse">
                <!-- <ul class="nav navbar-nav" style="margin-top: 8px;margin-left: 550px;"> -->
                <!-- <li><a class="active" href="index.html">Home</a></li> -->
                <!--     <li><a href="features.html">Features </a></li>
                    <li><a href="domain.html">Domain</a></li>
                    <li><a href="hosting.html">Hosting</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="contact.html">Contact</a></li> -->

                <!--  <li><h1 class="contact_me"><b><a href="http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->
                <!-- <li><h1 class="contact_me"><b><a href="http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->

                <!-- </ul> -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <h1 class="contact_me"><b><a
                                    href="https://wa.me/60123240066?text=I+would+like+to+inquire+about"
                                    target="_blank">+6012 3240 066</a></b></h1>
                    </li>
                    <!-- <li><a class="btn-light btn-radius btn-brd log" href="#" data-toggle="modal" data-target="#login"><i class="fa fa-unlock"></i> Register</a></li> -->
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/developers/v3.0"><i
                                class="fa fa-file"></i> API</a></li>
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/register"><i
                                class="fa fa-unlock"></i> Register</a></li>
                    <!-- <li><a class="btn-light btn-radius btn-brd log" href="#" data-toggle="modal" data-target="#login"><i class="fa fa-lock"></i> Login</a></li> -->
                    <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/login"><i
                                class="fa fa-lock"></i>
                            Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

custom.css file below

 .header_style_01 {
    background-color: #2d3032;
    display: block;
    left: 0;
    padding: 15px 20px 5px !important;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 111;
}

.navbar-default .navbar-toggle {
    border-color: #2d3032;
    color: #fff !important;
    background-color: #2d3032 !important;
}
.navbar-default .navbar-toggle:active{
    background-color: #DD0000 !important;
    border-color: #DD0000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent;
}

Script in index.blade.php

<script>
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('toggle-button');
    var navbarCollapse = document.getElementById('navbar');

    // Toggle 'active' class when the button is clicked
    button.addEventListener('click', function() {
        // Use a timeout to wait for the collapse animation to complete
        setTimeout(function() {
            if (navbarCollapse.classList.contains('in') || navbarCollapse.classList.contains('show')) {
                button.classList.add('active');
            } else {
                button.classList.remove('active');
            }
        }, 350); // Adjust delay to match the Bootstrap collapse animation duration
    });

    // Add 'active' class when the navbar is shown
    navbarCollapse.addEventListener('shown.bs.collapse', function() {
        button.classList.add('active');
    });

    // Remove 'active' class when the navbar is hidden
    navbarCollapse.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('active');
    });
});
</script>.

I place this code at the index.blade.php same with the code. But it still wont work. Tell me how can i resolve this issue?

At first is i use navbar toggle:hover. But the effect is when i click on it it will stay red. but if i click on the toggle again, it will stay red, and it will stay red unless i click on area outside the navbar.

2

Answers


  1. Try this one this is working on my side hopefully this also work for you

    HTML Code

     <header class="header header_style_01">
            <nav class="megamenu navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" id="toggle-button" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/"><img src="images/logos/smsGuru_logo.png" height="60px"
                                alt="sms guru" title="cheap sms"></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <h1 class="contact_me"><b><a
                                            href="https://wa.me/60123240066?text=I+would+like+to+inquire+about"
                                            target="_blank">+6012 3240 066</a></b></h1>
                            </li>
                            <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/developers/v3.0"><i
                                        class="fa fa-file"></i> API</a></li>
                            <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/register"><i
                                        class="fa fa-unlock"></i> Register</a></li>
                            <li><a class="btn-light btn-radius btn-brd log" href="https://sms.360.my/login"><i
                                        class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    

    custom.css file below

    .header_style_01 {
                background-color: #2d3032;
                display: block;
                left: 0;
                padding: 15px 20px 5px !important;
                position: relative;
                right: 0;
                top: 0;
                width: 100%;
                z-index: 111;
            }
    
            .navbar-default .navbar-toggle {
                border-color: #2d3032;
                color: #fff !important;
                background-color: #2d3032 !important;
            }
    
            .navbar-default .navbar-toggle.active {
                background-color: #DD0000 !important;
                border-color: #DD0000;
            }
    

    Script in index.blade.php

    <script>
            document.addEventListener('DOMContentLoaded', function () {
                var button = document.getElementById('toggle-button');
                var navbarCollapse = document.getElementById('navbar');
    
                button.addEventListener('click', function () {
                    // Check if navbar is collapsed (using jQuery's hasClass method)
                    if ($('#navbar').hasClass('in')) {
                        button.classList.remove('active');
                    } else {
                        button.classList.add('active');
                    }
                });
    
                $('#navbar').on('shown.bs.collapse', function () {
                    button.classList.add('active');
                });
    
                $('#navbar').on('hidden.bs.collapse', function () {
                    button.classList.remove('active');
                });
            });
        </script>
    

    also these CDNs

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    

    because there is two issues in your code one is Timing Issue and the 2nd is you directly checking for the class name ‘in‘ or ‘show‘ on the navbar collapse might not be reliable.

    I’ll use these steps for fix your issues one is instead of using setTimeout, directly toggle classes based on these events and the 2nd is utilize bootstrap’s shown.bs.collapse and hidden.bs.collapse events to determine the exact state of the navbar for fix background color issue.

    Here is example from my side:
    enter image description here
    enter image description here

    Hopefully this is works for you, Thanks.

    Login or Signup to reply.
  2. After analyzing your code, I found that you are using bootstrap too. So if you are using bootstrap then this solution will help. We can achieve your desired output with css only. Follow below steps.

    1. Add collapsed next to navbar-toggler in html.
    2. Add this .navbar-toggler.collapsed{background-color: black !important;} & .navbar-toggler {background-color: red !important;} to css.

    That’s all, Below is example.

    .navbar-toggler.collapsed{background-color: black !important;}
    
    .navbar-toggler {background-color: red !important;}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search