svg header

by jorgeluis

HTML

<header>

<div id="burger">

  <svg id="burger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="34px" viewBox="0 0 32 22.5" enable-background="new 0 0 32 22.5" xml:space="preserve">

    <g class="svg-menu-toggle">
      <path class="bar bar-1" d="M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0
                                 c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z">
      </path>
      <path class="bar bar-2" d="M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z">
      </path>
      <path class="bar bar-3" d="M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0
                                 c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z">
      </path>
      <rect width="45" height="30" fill="none"></rect>
    </g>

  </svg>
</div>


<div id="logo">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="166" height="46" viewBox="0 0 166 46">
  <path d="M141.8 11.3c-2.7 0-4.8 1-6.8 2.8-0.3-1.7-1.9-2.7-3.9-2.7-0.5 0-1.3 0.1-2.1 0.3 0 3.8-1.9 12.1-3 19-0.4 3.1 1.4 4.7 4.2 4.7 0.8 0 1.4-0.1 2.2-0.3 0-2.2 0.2-3.7 0.7-6.2l1.3-6.8c0.8-4.4 2.6-5.6 4.5-5.6 2.7 0 2.7 2.3 2.2 5.6l-1.2 7.3c-0.8 3.8-0.2 6.5 3.3 6.5 1.1 0 2.4-0.3 3.4-0.9-0.4-2.4-0.2-5.6 0.3-8.3l0.8-4c1.1-8-0.8-11.4-5.9-11.4v0zM121 11.5c-0.8 0-1.4 0.1-2.2 0.3-0.3 3.7-2 13.2-2.8 17.6-0.7 3.5-0.1 6.5 3.4 6.5 1.1 0 2.4-0.3 3.6-0.9-0.4-2.4-0.3-5.6 0.2-8.3l1.7-10.6c0.3-2.9-1.3-4.6-3.9-4.6zM123.1 7.8c-2.1 0-3.4-1.5-3.4-3.6 0-2.4 1.9-4.2 4.2-4.2 2.1 0 3.4 1.5 3.4 3.6-0.1 2.5-2.1 4.2-4.2 4.2zM106.9 11.3c-6.3 0-12.2 3.6-13.9 12.4-1.4 8 1.7 12.1 6.6 12.1 2.5 0 5.4-1.5 6.5-3.4 0.1 2 1.3 3.4 3.9 3.4 1.4 0 2.5-0.5 3.2-0.9-0.8-2.5-0.5-5.1...

CSS

header {
  background-color: #dc2763;
  padding: 1em;
  height: 50px;
}

#burger {
  position: absolute;
  top: 12px;
  left: 15px;
}
#burger .bar {
  fill: #fff;
}

#logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
#logo svg {
  fill: #fff;
  margin: 0 auto;
}

#search-icon {
  position: absolute;
  top: 28px; right: 15px;
}
#search-icon svg {
  stroke: #fff;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}