header nav w/ centered logo (clave)

_header.scss

#header.full-header {
  $c-header: #fff;
  $c-menu-trigger: #444;
  $nav-font: $ff-bree;

  width: 100%;
  height: 100px;

  &--transparent {
    position: absolute;

    @media screen and (max-width: $width-md) {
      position: relative;
    }
  }

  #primary-menu > ul {
    margin-right: 0;
    border-right: none;
    padding: 0;
    background-color: #fff;

    @include nav-color(#2e2e2e, 400);
    @include nav-color(#2e2e2e, 400, 1);
    @include nav-color(#2e2e2e, 400, 2);
    @include nav-color(#2e2e2e, 400, 3);

    &.hidden-md {
      padding-top: 10px !important;
    }
  }

  #primary-menu-trigger {
    font-size: 30px;
    pointer-events: auto;
    float: left;
    top: 0;
  }

  #header-wrap {
    background-color: $c-header;
    // background-image: url(/assets/header-bg.jpg);
    background-repeat: no-repeat;
    background-size: contain;

    @media screen and (max-width: $width-md) {
      background-color: #fff;
    }
  }

  #logo {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    padding-left: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translateY(30%);

    div {
      background-color: #fff;
      border-radius: 50%;
    }
  }

  .icon-reorder {
    color: $c-menu-trigger;
  }

  #logo img {
    padding: 2px;
    padding-left: 5px;
    max-width: 240px;
  }

  @media screen and (max-width: $width-md) {
    #logo {
      a {
        text-align: right;
        margin-left: 30px;
        margin-right: auto;
        padding-right: 30px;
      }

      img {
        margin-right: auto;
        padding: $spacing-xs;
        max-width: 240px;
      }
    }

    #primary-menu-trigger {
      right: 10px;
      left: auto;
      color: #343b42;
    }
  }

  @media (min-width: 992px) {
    .notJustAnEmptyDiv {
      width: 160px;
      height: 150px;
    }

    .logo-image-wrapper {
      width: 160px;
      position: relative;

      div {
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -50px;

        img {
          position: absolute;
          width: 88%;
          z-index: 10;
          margin-top: 13px;
        }
      }
    }

    :not(.static-sticky) #primary-menu {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      ul li {
        padding: 0;
      }
    }
  }

  #primary-menu ul {
    min-height: 0;
    border: none;
  }

  #primary-menu ul li {
    @media screen and (max-width: $width-md) {
      border-top: 1px solid #2e2e2e;
      background-color: #fff;

      &:last-child {
        border-bottom: 1px solid #2e2e2e;
      }
    }
  }

  :not(.static-sticky) #primary-menu ul > li > a {
    // letter-spacing: 1px;
    font-size: 14px;
    padding: 0 6px;
    text-transform: none;
    transition: padding 0.3s ease;
    font-family: $ff-bree;

    &:hover {
      text-decoration: underline !important;
    }

    @media (min-width: 1200px) {
      font-size: 16px;
      padding: 0 10px;
    }
  }
}

//resize header from Canvas
#header,
#header-wrap,
#logo {
  height: 100px !important;
  transition: height 0.4s ease, opacity 0.3s ease;

  @media (max-width: $width-md) {
    height: 50px !important;
  }
}

#logo img {
  height: 75px !important;
  transition: height 0.4s ease, opacity 0.3s ease;

  @media (max-width: $width-md) {
    height: 75px !important;
  }
}

#header.sticky-header:not(.static-sticky),
#header.sticky-header:not(.static-sticky) #header-wrap,
#header.sticky-header:not(.static-sticky) #logo {
  height: 100px !important;
}

#header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img {
  height: 75px !important;
}

header.twig

<!-- Header
============================================= -->
<header id="header" class="full-header{% if transparent %} {{ "full-header--transparent" }}{% endif %}">

    <div id="header-wrap" >

        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

        <!-- Logo ============================================= -->
        <div id="logo" class="hidden-md hidden-lg">
            <a href="#" data-scrollto="#header" data-offset="60">
                <div>
                    <img src="/assets/logos/logo.svg" alt="{{ mainDoctor }}">
                </div>
            </a>
        </div><!-- #logo end -->

        <!-- Primary Navigation ============================================= -->
        <nav id="primary-menu">

            {#<p class="menu-copy hidden-sm hidden-xs">New Patients Call: <a href="tel:{{ newPhone }}" class="menu-copy__phone">{{ newPhoneNoBreak }}</a></p>#}
            <ul class="one-page-menu navbar hidden-xs hidden-sm" data-easing="easeInOutExpo" data-speed="1500">
                <li><a href="#" data-offset="98" data-href="#section-specials">Special Offers</a></li>
                <li><a href="#" data-offset="98" data-href="#section-reviews">Reviews</a></li>
                <li><a href="#" data-offset="98" data-href="#section-insurance">No Insurance?</a></li>
                <li><a href="#" data-offset="98" data-href="#section-about">Meet the Team</a></li>

                <li><a href="#" data-offset="98" data-href="#header">
                    <div class="logo-image-wrapper">
                        <div class="notJustAnEmptyDiv">
                            <img src="/assets/logos/logo.svg" alt="{{ mainDoctor }}">
                        </div>
                    </div></a>
                </li>

                <li><a href="#" data-offset="98" data-href="#section-services">Our Services</a></li>
                <li><a href="#" data-offset="98" data-href="#section-forms">Forms</a></li>
                <li><a href="#" data-offset="98" data-href="#section-care-credit-slab">Patient Financing</a></li>
                <li><a href="#" data-offset="98" data-href="#section-location">Location</a></li>
            </ul>

            <ul class="one-page-menu navbar hidden-md hidden-lg" data-easing="easeInOutExpo" data-speed="1500">
                <li><a href="#" data-offset="98" data-href="#section-specials">Special Offers</a></li>
                <li><a href="#" data-offset="98" data-href="#section-reviews">Reviews</a></li>
                <li><a href="#" data-offset="98" data-href="#section-insurance">No Insurance?</a></li>
                <li><a href="#" data-offset="98" data-href="#section-about">Meet the Team</a></li>
                <li><a href="#" data-offset="98" data-href="#section-services">Our Services</a></li>
                <li><a href="#" data-offset="98" data-href="#section-forms">Forms</a></li>
                <li><a href="#" data-offset="98" data-href="#section-care-credit-slab">Patient Financing</a></li>
                <li><a href="#" data-offset="98" data-href="#section-location">Location</a></li>
            </ul>

            <!-- Top Search ============================================= -->

        </nav><!-- #primary-menu end -->

        <!--</div>-->
    </div>

</header><!-- #header end -->
<div class="clear"></div>