I currently have a Bootstrap 4 dropdown feature on my website, both through a hyperlink and also on the sidebar. The styling includes a[aria-expanded="true"].
Unfortunately, this is causing the element below to have a black background, which is necessary for my sidebar but not for the button.
https://i.sstatic.net/sOWSp.png
I've attempted to use the following code, but it doesn't seem to be effective:
#pageSettings a[aria-expanded="true"]{
color: #243B55;
font-weight: 400;
background: initial!important;
}
This is the relevant HTML:
<a id="pageSettings" href="#" class=" mr-3" data-toggle="dropdown"><i class="fa-solid fa-circle-ellipsis fa-lg"></i></a>
<div class="dropdown-menu shadow">
<a class="dropdown-item" href="<?php echo URLROOT.'/permissisions/setpermissions/'.$data['pageHeader']['pagePermName']; ?>">User Permissions</a>
<a class="dropdown-item" href="<?php echo URLROOT.'/permissisions/grouppermissions'; ?>">Group Permissions</a>
</div>
I'm struggling to identify the correct syntax to apply the style exclusively to that specific element. Any suggestions would be greatly appreciated!
Could someone offer assistance?