I'm looking to remove the top and bottom padding from my navbar to give it a similar look to the navbar on Wix.com. I've spent most of today trying to figure this out. I've attempted to remove padding with !important from the navbar, tried using py-0, and removing padding from the child container for the navbar.
Any guidance on how to achieve this would be greatly appreciated.
* {
font-family: 'Wix Madefor Text', sans-serif;
font-family: 'Wix Madefor Display', sans-serif;
}
/* Global Font Size */
html {
font-size: 16px;
}
/* Navbar */
.navbar-custom {
height: 60px;
}
/* Small Font */
.sm-font-size {
font-size: 11px !important;
}
/* Medium Font */
.md-font-size {
font-size: 20px !important;
}
/* Divider */
.divider {
align-self: center;
border-right: 1px solid hsl(240, 3%, 73%);
display: inline-flex;
height: 15px;
}
/* Colors */
.btn:first-of-type {
background-color: hsl(216, 83%, 50%) !important;
}
/* Hover Effects*/
.hover-link:hover {
color: hsl(225, 73%, 57%) !important;
}
/* Hover Effects*/
.btn:first-of-type:hover {
background-color: hsl(216, 89%, 57%) !important;
}
/* Banner */
.banner {
background-color: hsl(230, 54%, 35%);
font-size: 14px;
margin: 60px 0 0 0;
}
<nav class="navbar navbar-expand-sm py-0 navbar-custom fixed-top">
<div class="container-fluid">
<!-- Navbar content goes here -->
</div>
</nav>
<div class="container-fluid banner py-2 text-center text-light ">