I have been struggling to get rid of the shadow/outline/border on my navigation bar. Despite trying various CSS tweaks, I have not been successful.
Below is the specific HTML code:
<nav class="navbar navbar-expand-sm" id="site-navigation">
<ul class="navbar-nav" id="site-home">
<li class="nav-item">
<a class="navbar-brand" href="index.html">
<img src="build/img/site-logo.png" alt="Home" height="61px" width="155px">
</a>
</li>
</ul>
<!-- Socials -->
<ul class="navbar-nav ms-auto" id="site-socials">
<!-- Github -->
<li class="nav-item socials">
<a href="" class="btn btn-transparent btn-lg" role="button"> GitHub </a>
</li>
<!-- LinkedIn -->
<li class="nav-item socials">
<a href="" class="btn btn-transparent btn-lg" role="button"> LinkedIn </a>
</li>
</ul>
</nav>
Below is my current CSS code:
.navbar.navbar-expand-sm {
box-shadow: none;
outline: none;
-webkit-box-shadow: none;
border: 0;
}
nav#site-navigation {
box-shadow: none;
outline: none;
-webkit-box-shadow: none;
border: 0;
}
I am currently using bootstrap v5.0.2, any assistance on this matter would be highly appreciated (: