Good day everyone,
I am seeking help with a Bootstrap query. Here is the HTML code I am working on
<!DOCTYPE html>
<html lang="nl-NL">
<body>
<div class="container-md">
<br>
<div class="accordion" id="accordionAikido">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Lorem Ipsum Header
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionAikido">
<div class="accordion-body">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</div>
<footer class="container-md">
<p id="copyright">© Freddy Meijer</p>
</footer>
</body>
</html>
I have customized the accordion colors in a CSS file:
h4,
p,
#copyright {
color: #fbfcfd;
padding-left: 10px;
}
.accordion-body{
background-color: #7aa8bd;
}
.accordion-button{
background-color: #fbfbef;
}
However, I am facing an issue now. The collapsed color appears off-yellow, but when expanded, it turns blue-ish:
https://i.sstatic.net/EpPd2.png
https://i.sstatic.net/nWMYZ.png
I have tried several solutions to change the blue-ish color to another shade of yellow, but without success. What could I be overlooking?
I attempted altering the color of all IDs and Classes in the CSS file, but nothing seems to work. I also followed the advice from this post about using
.accordion-button.collapsed::after
but unfortunately, the button remains blue. Any insights would be greatly appreciated.