Mobile ecommerce website header

index.html

<header>
  <div class="menu">
    <svg viewBox="0 0 512 512"><path d="M462 163.5H50v-65h412V163.5z M462 223.5H50v65h412V223.5z M462 348.5H50v65h412V348.5z"/></svg> 
  </div><!-- menu -->
  <div class="search">
    <svg viewBox="0 0 512 512"><path d="M460.5 408.4L351.4 299.4c16-25.1 25.2-54.9 25.2-86.8C376.6 122.9 303.7 50 214.1 50c-89.6 0-162.5 72.9-162.5 162.5s72.9 162.5 162.5 162.5c30.3 0 58.7-8.4 83.1-22.9L406.9 462 460.5 408.4zM112.1 212.5c0-56.2 45.7-101.9 101.9-101.9 56.2 0 101.9 45.7 101.9 101.9s-45.7 101.9-101.9 101.9C157.8 314.5 112.1 268.8 112.1 212.5z"/></svg> 
  </div>
  <div class="logo">   
    <svg viewBox="0 0 702 144">
<path d="M16.4 26c0 0 34.9 87.9 32.3 96.9 0 0 6.9 2.9 8.6-2.2 1.7-5 0.5-99.8 9.8-101 0 0 2.4-6.5-6.2-4.1 0 0-8.1 12.9-9.6 84.7 1.2 7.9-16.3-48.3-16.3-48.3S25.9 22.7 20.9 21.9C15.9 21.2 16.4 26 16.4 26z"/>
<path d="M76.8 53.2c0 0 3.8 3.8 7.7 0.2s-1.4-5.5-2.2-5.3c-0.7 0.2-2.6-0.2-4.1 1.6 -1.3 1.6-1.2 1.8-1.5 2.8C76.7 53 76.8 53.2 76.8 53.2zM76.9 68.5l1.9 54.7c0 0 3.3 3.8 5.4-0.7 2.1-4.5-1.7-52.6-1.7-52.6s-0.5-4-4.9-1.7C76.6 68.5 76.9 68.5 76.9 68.5z"/>
<path d="M95.4 66.8c0 0 21 51.4 18.3 56.7 0 0 4.8 2.1 6.3-0.7 -0.2-4.1 5.3-56.3 12-56.4 0 0 2-3.5-4.2-2.7 0 0-8.3 6.5-11 47.2 0.5 4.5-9.2-28.3-9.2-28.3s-5-17.2-8.6-17.9C95.3 64 95.4 66.8 95.4 66.8z"/>
<path d="M174.8 59.2l-0.6-0.6c0 0-0.6-0.8-2.6-1 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.6-0.3-16.3 7 -10.7 7.3-25.4 54.2-8.3 57.1 15.7 2.6 27.5-39.8 28.3-43.6 1.8 2.4 5.7 22.1 5.7 22.1l5.7 21c0 0 3.7 4.1 5.4-1.3C179.1 111.4 174.8 59.2 174.8 59.2zM148.3 118.8c0 0-9.6 6.5-7.7-11.5 0.6-24.2 27.2-58.1 26.8-30.9C164.3 100.4 148.3 118.8 148.3 118.8z"/>
<path d="M315 60.2l-0.6-0.6c0 0-0.6-0.8-2.6-1 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.6-0.3-16.3 7 -10.7 7.3-25.4 54.2-8.3 57.1 15.7 2.6 27.5-39.8 28.3-43.6 1.8 2.4 5.7 22.1 5.7 22.1l5.7 21c0 0 3.7 4.1 5.4-1.3C319.3 112.4 315 60.2 315 60.2zM288.4 119.8c0 0-9.6 6.5-7.7-11.5 0.6-24.2 27.2-58.1 26.8-30.9C304.5 101.3 288.4 119.8 288.4 119.8z"/>
<path d="M350.7 27.2c0 0-1-1.3-1-5.7 0-4.5-5.4-2.6-5.4-2.6s-3.8-5.7-7.3-7.3c-5.4 0-2.9 6.4-2.9 6.4l11.2 10.8 1.9 4.8 1 12.8v68.6l-2.6-1.9c0 0-8.1-6.8-6.4-0.3 6.3 7.6 19.1 16 38 7.7C422.7 96.1 350.7 27.2 350.7 27.2zM354.5 118.1c0.7-8.2-2.6-80.2-2.6-80.2s-4.8-17.4 26.2 30.6C409 119.7 352.2 122.5 354.5 118.1z"/>
<path d="M399.5 52.8c0 0 3.8 3.8 7.7 0.2 3.8-3.6-1.4-5.5-2.2-5.3 -0.7 0.2-2.6-0.2-4.1 1.6 -1.3 1.6-1.2 1.8-1.5 2.8C399.4 52.6 399.5 52.8 399.5 52.8zM399.6 68l1.9 54.7c0 0 3.3 3.8 5.4-0.7 2.1-4.5-1.7-52.6-1.7-52.6s-0.5-4-4.9-1.7C399.3 68 399.6 68 399.6 68zM417.2 67.3c0 0 21 51.4 18.3 56.7 0 0 4.8 2.1 6.3-0.7 -0.2-4.1 5.3-56.3 12-56.4 0 0 2-3.5-4.2-2.7 0 0-8.3 6.5-11 47.2 0.5 4.5-9.2-28.3-9.2-28.3s-5-17.2-8.6-17.9C417.1 64.5 417.2 67.3 417.2 67.3z"/>
<path d="M495.2 59.8l-0.6-0.6c0 0-0.6-0.8-2.5-1 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.6-0.3-16.3 7 -10.7 7.3-25.4 54.2-8.3 57.1 15.7 2.6 27.5-39.8 28.3-43.6 1.8 2.4 5.7 22.1 5.7 22.1l5.7 21c0 0 3.7 4.1 5.4-1.3C499.5 111.9 495.2 59.8 495.2 59.8zM468.7 119.3c0 0-9.6 6.5-7.7-11.5 0.6-24.2 27.2-58.1 26.8-30.9C484.7 100.9 468.7 119.3 468.7 119.3z"/>
<path d="M560.1 67.4c0 0 3 1.8 3.5-1.9 0.5-3.7-12.8-18.2-22.8-3.5 -10 14.7-16.6 37-12.1 50.2 4.5 13.2 24.1 22 36.4-1 0.6-1.3 0.6-5.7-1.8-3.3 -2.4 2.4-19.9 28.9-31.6-1.1 -2.5-28.1 18.7-60.3 27.4-41.1L560.1 67.4zM584.8 68.2c0 0 16.8 0.4 15 33.9 -1.3 27.1-17.1 14.9-17.1 14.9s-8.3-5-7.4-27.1c2.6-18.7 6.5-16.1 6.5-16.1s2.2-5.9-2.1-5c-4.3 0.9-9.4 12.3-9.2 30.4 0.2 18.2 13.9 30.4 25.5 22.8 12.4-7.3 10.1-43.1 1.7-52.2 -5.4-7.3-13.5-8-15.2-7.9 -1.7 0.1-8.2 3.8 0.5 6.1C584.3 68.2 584.8 68.2 584.8 68.2zM514.6 122.5c0 0 3.6 3.6 7.3 0.2 3.6-3.4-1.4-5.2-2-5 -0.7 0.2-2.5-0.2-3.9 1.6 -1.2 1.5-1.2 1.7-1.4 2.6C514.6 122.3 514.6 122.5 514.6 122.5zM610.2 69.6c0 0 3.7 9.9-0.4 53 0 0 2.6 3.8 5.2-0.1 0.5-13.4 0.7-52.5 17.4-56.7 11.9 1.6 10.9 53.8 10.9 53.8s2.2 3.4 4.2-0.2c1.9-3.6 2.4-46 20.1-53.3 0 0 8.9 0.4 10.6 56.6 0 0 2.2 2.8 4.4-0.6 0.6-1.5-0.6-1.9-0.6-1.9s0.7-77.3-23.6-53.5c-7.5 6.9-11.3 22.4-11.3 22.4s-5-40.3-21.8-24.4c-7.4 7.1-8.4 12.1-8.4 12.1s0.3-11.8-6.2-8.6C609.1 68.8 610.2 69.6 610.2 69.6zM205.4 32l-5.6 76.3c0 0-0.7 15.1 14.9 16 15.5 1 56.4-3.3 56.4-3.3s3.8-3.1-2-5c-5.8-1.9-55.3 7.7-58.6-1 0 0-6.4-2.4-5.1-22.7 1.3-20.3 3.1-37.3 3.1-37.3l2-20.3c0 0 0.9-6.5-2-6.5C205.6 28.2 205.4 32 205.4 32z"/>
<path d="M523.5 351.6c0 0 3.6 3.6 7.2 0.2 3.6-3.4-1.3-5.1-2-4.9 -0.7 0.2-2.4-0.2-3.8 1.5 -1.2 1.5-1.1 1.7-1.4 2.6C523.5 351.3 523.5 351.6 523.5 351.6z"/>
<path d="M31.1 256.2c0 0 34.5 86.9 31.9 95.8 0 0 6.9 2.8 8.5-2.1s0.5-98.6 9.7-99.8c0 0 2.4-6.4-6.1-4 0 0-8 12.8-9.5 83.7 1.2 7.8-16.1-47.8-16.1-47.8s-9-29.1-13.9-29.8C30.6 251.5 31.1 256.2 31.1 256.2z"/>
<path d="M90.8 283.1c0 0 3.8 3.8 7.6 0.2 3.8-3.5-1.4-5.4-2.1-5.2 -0.7 0.2-2.6-0.2-4 1.6 -1.3 1.5-1.2 1.8-1.4 2.7C90.7 282.9 90.8 283.1 90.8 283.1zM90.9 298.2l1.9 54.1c0 0 3.3 3.8 5.3-0.7 2.1-4.5-1.7-52-1.7-52s-0.5-3.9-4.8-1.7C90.6 298.2 90.9 298.2 90.9 298.2z"/>
<path d="M109.2 296.5c0 0 20.8 50.8 18 56 0 0 4.8 2 6.2-0.7 -0.2-4.1 5.2-55.6 11.8-55.7 0 0 2-3.5-4.2-2.7 0 0-8.2 6.4-10.9 46.6 0.5 4.5-9.1-28-9.1-28s-5-17-8.5-17.7S109.2 296.5 109.2 296.5z"/>
<path d="M187.6 289l-0.6-0.6c0 0-0.6-0.8-2.5-0.9 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.5-0.3-16.1 6.9 -10.6 7.3-25.1 53.6-8.2 56.4 15.5 2.6 27.2-39.4 27.9-43.1 1.8 2.3 5.7 21.9 5.7 21.9l5.6 20.8c0 0 3.6 4.1 5.4-1.3C191.9 340.6 187.6 289 187.6 289zM161.4 347.9c0 0-9.5 6.4-7.6-11.3 0.6-23.9 26.9-57.5 26.5-30.5C177.2 329.7 161.4 347.9 161.4 347.9z"/>
<path d="M326.2 290l-0.6-0.6c0 0-0.6-0.8-2.5-0.9 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.5-0.3-16.1 6.9s-25.1 53.6-8.2 56.4c15.5 2.6 27.2-39.4 27.9-43.1 1.8 2.3 5.7 21.8 5.7 21.8l5.6 20.8c0 0 3.6 4.1 5.4-1.3C330.4 341.5 326.2 290 326.2 290zM300 348.9c0 0-9.5 6.4-7.6-11.3 0.6-23.9 26.9-57.5 26.5-30.5C315.8 330.7 300 348.9 300 348.9z"/>
<path d="M361.4 257.3c0 0-0.9-1.3-0.9-5.7s-5.4-2.5-5.4-2.5 -3.8-5.7-7.3-7.2c-5.4 0-2.8 6.3-2.8 6.3l11 10.7 1.9 4.7 0.9 12.6v67.8l-2.5-1.9c0 0-8-6.7-6.3-0.3 6.2 7.5 18.9 15.8 37.5 7.6C432.7 325.4 361.4 257.3 361.4 257.3zM365.2 347.2c0.7-8.1-2.5-79.2-2.5-79.2s-4.7-17.2 25.8 30.3C419.1 348.8 363 351.6 365.2 347.2z"/>
<path d="M409.7 282.7c0 0 3.8 3.8 7.6 0.2 3.8-3.5-1.4-5.4-2.1-5.2s-2.6-0.2-4 1.6c-1.3 1.5-1.2 1.8-1.4 2.7C409.6 282.4 409.7 282.7 409.7 282.7zM409.8 297.7l1.9 54.1c0 0 3.3 3.8 5.3-0.7 2.1-4.5-1.7-52-1.7-52s-0.5-3.9-4.8-1.7C409.5 297.7 409.8 297.7 409.8 297.7zM427.2 297c0 0 20.8 50.8 18 56 0 0 4.8 2 6.2-0.7 -0.2-4.1 5.2-55.6 11.8-55.7 0 0 2-3.5-4.2-2.7 0 0-8.2 6.4-10.9 46.6 0.5 4.5-9.1-28-9.1-28s-5-17-8.5-17.7C427.1 294.3 427.2 297 427.2 297z"/>
<path d="M504.3 289.6l-0.6-0.6c0 0-0.6-0.8-2.5-0.9 -1.9-0.2-2.2 1.6-2.2 1.6l-1.4 1.9c0 0-5.5-0.3-16.1 6.9 -10.6 7.3-25.1 53.6-8.2 56.4 15.5 2.6 27.2-39.4 27.9-43.1 1.8 2.3 5.7 21.8 5.7 21.8l5.6 20.8c0 0 3.6 4.1 5.4-1.3C508.6 341.1 504.3 289.6 504.3 289.6zM478.1 348.4c0 0-9.5 6.4-7.6-11.3 0.6-23.9 26.9-57.5 26.5-30.5C493.9 330.2 478.1 348.4 478.1 348.4z"/>
<path d="M568.5 297.1c0 0 3 1.7 3.5-1.9 0.5-3.6-12.6-18-22.5-3.5 -9.9 14.5-16.4 36.6-12 49.6 4.4 13.1 23.8 21.8 35.9-0.9 0.6-1.3 0.6-5.7-1.7-3.3 -2.4 2.4-19.7 28.5-31.2-1.1 -2.5-27.7 18.4-59.6 27.1-40.7L568.5 297.1zM592.8 297.9c0 0 16.6 0.4 14.8 33.5 -1.2 26.7-16.9 14.8-16.9 14.8s-8.2-5-7.3-26.8c2.5-18.4 6.4-16 6.4-16s2.1-5.8-2.1-4.9c-4.3 0.9-9.3 12.2-9 30.1 0.2 17.9 13.8 30 25.2 22.5 12.2-7.2 10-42.6 1.6-51.6 -5.4-7.2-13.3-8-15-7.8 -1.7 0.1-8.1 3.8 0.5 6C592.4 297.8 592.8 297.9 592.8 297.9zM617.9 299.3c0 0 3.7 9.8-0.4 52.4 0 0 2.6 3.8 5.1-0.1 0.5-13.2 0.7-51.9 17.2-56 11.8 1.5 10.8 53.2 10.8 53.2s2.2 3.3 4.1-0.2c1.9-3.6 2.4-45.5 19.8-52.6 0 0 8.8 0.4 10.4 55.9 0 0 2.2 2.7 4.3-0.6 0.6-1.5-0.5-1.9-0.5-1.9s0.7-76.4-23.3-52.9c-7.4 6.8-11.2 22.1-11.2 22.1s-4.9-39.8-21.5-24.1c-7.3 7-8.3 11.9-8.3 11.9s0.3-11.7-6.1-8.5C616.9 298.5 617.9 299.3 617.9 299.3zM217.9 262.2l-5.5 75.4c0 0-0.7 14.9 14.7 15.8 15.4 0.9 55.7-3.3 55.7-3.3s3.7-3.1-2-5c-5.7-1.9-54.6 7.6-57.9-0.9 0 0-6.4-2.4-5-22.5 1.3-20.1 3.1-36.9 3.1-36.9l2-20.1c0 0 0.9-6.4-2-6.4C218.1 258.4 217.9 262.2 217.9 262.2z"/>
</svg> 
  </div>
  <div class="account">
    <svg viewBox="0 0 512 512"><path d="M377.1 170.8c0 66.3-53.7 120-120 120s-120-53.7-120-120c0-66.3 53.7-120 120-120S377.1 104.5 377.1 170.8zM356.1 296.4c-28 22.1-62.6 34.3-99 34.3 -36.8 0-71.8-12.5-99.9-35.1C83.1 322.9 50 417.9 50 461.3h412C462 418.3 428.7 323.9 356.1 296.4z"/></svg>
  </div>
  <div class="checkout">
    <svg viewBox="0 0 512 512"><path d="M126.8 189.1l92.1-92.1c6.8-6.8 17.9-6.8 24.7 0 6.8 6.8 6.8 17.9 0 24.7l-67.4 67.4H126.8zM335.8 189.1h49.5l-92.1-92.1c-6.8-6.8-17.9-6.8-24.7 0 -6.8 6.8-6.8 17.9 0 24.7L335.8 189.1zM50 213.8v40h11c9.2 0 17.5 5.2 21.6 13.5l74.7 152.8H355l74.4-152.8c4-8.3 12.4-13.5 21.6-13.5H462v-40H50z"/></svg>
  </div>
</header>

Mobile-ecommerce-website-header.markdown

Mobile ecommerce website header

A Pen by John Aspinall on CodePen.

License.

style.scss

@import "compass/css3";
* {
  box-sizing: border-box;
}
header {
  border-bottom: 1px solid black;
  font-size: 0;
  position: relative;
  div {
    border-right: 1px solid black;
    display: inline-block;
    width: 12.5%;
    &:last-child {border: none;}
  }
  svg {
    height: 38px; 
    margin: 0 auto;
    display: block;
  }
  .logo {
    width: 50%;
    svg {
      width: 100%;
      display: inline-block;
    }
   .checkout svg {
     height: 48px; 
   }
  }
}