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
Try this one this is working on my side hopefully this also work for you
HTML Code
custom.css file below
Script in index.blade.php
also these CDNs
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:
Hopefully this is works for you, Thanks.
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.collapsed
next tonavbar-toggler
in html..navbar-toggler.collapsed{background-color: black !important;}
&.navbar-toggler {background-color: red !important;}
to css.That’s all, Below is example.