Высота Navbar игнорируется Chrome и Safari

Question

Я обнаружил неприятный сюрприз в локальном проекте, который я разрабатываю, две недели назад я все правильно визуализировал, но теперь в Chrome и Safari высота навигационной панели игнорируется, в Firefox вместо этого она работает все регулярно, а также Codepen .Сайт основан на Wordpress + Bootstrap 4

Firefox против Chrome

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"><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>

И пользовательский 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

Существует ли конкретная причина, по которой элемент navbar не имеет установленной высоты.Установка высоты действительно поможет вам и сделает результаты более согласованными во всех браузерах.

Answer 2

Ну, посмотрев на ваш код, я вижу, что вы нигде не указали высоту вообще.Единственная высота указана на элементе логотипа img, и определяется только максимальная высота.Это может быть причиной вашей проблемы, поскольку высота вашей панели навигации зависит от этого элемента.Установка фиксированной высоты или минимальной высоты для вашего img решит вашу проблему.

.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;
}