I am facing an issue with removing padding from a button that has an image inside it. I have tried using style="padding: 0px !important" and the p-0 class, but it doesn't seem to work. Switching the <button> to <a> removes the padding, but then I lose the click effect. Any solutions or suggestions?
https://i.sstatic.net/wbxwJ.jpg
https://i.sstatic.net/18B32.jpg
This is my HTML Navbar:
<nav class="d-flex icon_ah navbar sticky-top navbar-dark bg-dark navbar-expand-lg p-0">
<div>
<form action="#">
<button type="submit" class="navbar-toggler p-0 m-2 border-0">
<span class="bi bi-house-fill"></span>
</button>
</form>
</div>
<div>
<form class="btn-group">
<button class="navbar-toggler p-0 m-2 border-0" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="bi bi-plus-circle"></span>
</button>
<ul class="dropdown-menu bg-dark d-lg-none" aria-labelledby="dropdownMenuButton1">
<?php for ($i = 0; $i < count($item_ah); $i++) { ?>
<li><a class="dropdown-item" href="<?= $item_ah[$i][1]; ?>"><?= $item_ah[$i][0]; ?></a></li>
<?php } ?>
</ul>
</form>
</div>
<div class="ms-auto">
<form class="btn-group">
<button class="navbar-toggler p-0 m-2 border-0" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<img class="rounded" style="height:29.33px;" src="\img\system\user.png" alt="user-glories">
</button>
</form>
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item icon_ahm">
<a class="nav-link" href="<?= base_url('#'); ?>">
<b class="bi bi-house-fill"></b> Dashboard</a>
</li>
<li class="nav-item dropdown icon_ahm">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<b class="bi bi-plus-circle-fill"></b> New
</a>
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
<?php for ($i = 0; $i < count($item_ah); $i++) { ?>
<li><a class="dropdown-item" href="<?= $item_ah[$i][1]; ?>"><?= $item_ah[$i][0]; ?></a></li>
<?php } ?>
</ul>
</li>
</ul>
</div>
</nav>
This is my CSS:
.sampul {
width: 70px;
}
.table > tbody > tr > * {
vertical-align: middle;
}
.icon_ah > div > button,
.icon_ah > div > form > button {
font-size: 29.33px;
}
.icon_ahm > ul > li > a,
.icon_ahm {
font-size: 13px;
}
.dropdown-item {
color: #b4b9be;
}
.dropdown-item:hover {
color: rgb(85, 85, 85);
background-color: rgba(255, 255, 255, 0.856);
}
.dropdown-item:active {
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.363);
}