Recently, I encountered an unexpected issue in a local project that I've been working on. Two weeks ago, everything appeared correctly, but now Chrome and Safari are ignoring the height of the navbar. Surprisingly, Firefox is displaying it correctly, as well as on Codepen. This website is built using Wordpress + Bootstrap 4.
Check out the difference between Firefox and Chrome here.
Here's the HTML code snippet:
<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"><a href="http://www.hebi.local/" class="nav-link">Home</a></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"><a href="http://hebi.local/about/" class="nav-link active">About</a></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"><a href="http://hebi.local/gallery/" class="nav-link dropdown-toggle" data-toggle="dropdown">Gallery</a>
<div class="dropdown-menu">
<a href="http://hebi.local/gallery/bespoke/" class=" dropdown-item">Bespoke</a><a href="http://hebi.local/gallery-type/collections/" class=" dropdown-item">Collections</a></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"><a href="http://hebi.local/contact/" class="nav-link">Contact</a></li>
</ul>
<div class="external mr-auto">
<a href="https://www.etsy.com/shop/HebiCorsetry" class="btn btn-primary shop-btn">Shop</a>
<a href="https://www.facebook.com/HebiCorsets/" class="btn"><i class="fab fa-facebook-f"></i></a>
<a href="http://i%20class=fab%20fa-instagram/i" class="btn"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</nav>
And here's the custom CSS styles used:
.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;
}