Search code examples
javascriptphphtmlcsslaravel

Navbar toggle:active issue

Currently I am facing an issue with my desired CSS effects. The problem 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 go from red back to black. But, 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.

Image retract/expand:

Retract image

Expand image

The complete navbar:

Navbar toggle when click/holding click

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 placed this code at the index.blade.php same with the code. But it still won't work.

At first I used navbar toggle:hover. But the effect is that 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.

Solution

  • 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>