Navbar height ignored by Chrome and Safari - html

Question

I found an unpleasant surprise in a local project that I'm developing, two weeks ago I visualized everything correctly but now on Chrome and Safari the height of the navbar is ignored, on Firefox instead it works all regularly as well as on Codepen. The website is based on Wordpress + Bootstrap 4
firefox vs chrome
The HTML:
<nav id="top-navbar" class="navbar sticky-top navbar-expand-lg navbar-dark animate">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="bs4navbar" class="collapse navbar-collapse mx-auto">
<ul id="menu-left" class="navbar-nav ml-auto"><li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27 nav-item">Home</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-23 current_page_item menu-item-28 nav-item active">About</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29 nav-item dropdown">Gallery
<div class="dropdown-menu">
BespokeCollections</div>
</li>
</ul>
<a class="navbar-brand logo animate d-none d-sm-block" href="http://hebi.local">
<img class="animate" src="https://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.png" alt="Logo">
</a>
<ul id="menu-right" class="navbar-nav mr-0"><li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 nav-item">Contact</li>
</ul>
<div class="external mr-auto">
Shop
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</nav>
And the custom CSS:
.navbar {
margin:0;
border:none;
border-radius:0;
background-image: none;
text-transform: uppercase;
background: #000;
font-family: 'Cinzel', serif;
}
.logo a {
display: block;
position: relative;
max-height: 100px;
}
.logo img{
max-width: 200px;
max-height: 100px;
padding: .5rem;
-webkit-transition: all ease .2s;
transition: all ease .2s;
}
.navbar a {
color: #cc0000;
}
.navbar .btn-primary {
background: #CC0000;
border: solid #CC0000;
color: #FFF;
}
.navbar .btn-primary:hover {
background: #F81717;
border: solid #F81717;
color: #FFF;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease;
}
.navbar-nav ul{list-style-type: none}
.navbar-nav li .dropdown-menu li a{line-height: 50px; height: 50px;}
.spacer{height: 50px;}
.no-margin{margin:0; padding:0;}
.navbar li a {
-webkit-transition: color ease .2s;
transition: color ease .2s;
display: inline-block;
padding: 0 15px;
font-weight: 400;
letter-spacing: 2px;
font-style: normal;
text-transform: uppercase;
}

Answer 1

Well after taking a look at your code, I see you have nowhere specified any height at all. The only height specification is on the logo img element and only the max-height is defined. That could be the cause for your issue, since the height of your navbar depends on that element. Setting a fixed height or min-height to your img will solve your issue.
.logo img{
max-width: 200px;
min-height: 100px;
max-height: 100px;
padding: .5rem;
-webkit-transition: all ease .2s;
-moz-transition: all ease .2s;
-ms-transition: all ease .2s;
-o-transition: all ease .2s;
transition: all ease .2s;
}

Answer 2

Is there a specific reason why the navbar element does not have a height set. Setting the height will indeed help you and it will make the result look more consistent across browsers.