menu fixes

src/components/atoms/Hamburger.module.scss

@@ -4,11 +4,11 @@
 .hamburger {
   width: 24px;
   height: 24px;
-  display: block;
+  display: inline-block;
   position: relative;
   transform: rotate(0deg);
   cursor: pointer;
-  margin-top: 6px;
+  margin-top: $spacer / 2;
 }
 
 .hamburgerLine {

src/components/molecules/Search/SearchButton.module.scss

@@ -4,6 +4,7 @@
   padding: $spacer / 2;
   vertical-align: middle;
   display: inline-block;
+  margin: 0;
   margin-right: $spacer / 4;
 
   &:focus {

src/components/molecules/Search/index.module.scss

@@ -4,7 +4,7 @@
   position: absolute;
   left: $spacer / 2;
   right: $spacer / 2;
-  top: -($spacer / 4);
+  top: $spacer / 4;
   z-index: 10;
 
   input {

src/components/organisms/Header.module.scss

@@ -2,9 +2,6 @@
 @import 'mixins';
 
 .header {
-  margin-top: ($spacer/2);
-  margin-bottom: ($spacer/2);
-
   @media (min-width: $screen-sm) and (min-height: 500px) {
     position: fixed;
     width: 100%;
@@ -21,6 +18,7 @@
   position: relative;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 0 $spacer;
 
   @media (min-width: $screen-md) {
@@ -32,21 +30,19 @@
 /////////////////////////////////////
 
 .title {
-  margin-top: $spacer / 5;
-  margin-bottom: 0;
-
-  svg {
-    fill: $brand-grey-light;
-    width: 160px;
-    height: 30px;
-    margin: 0;
-    transition: 0.2s $easing;
-  }
+  margin: 0;
 
   a {
     display: block;
     @include hide-text;
 
+    width: 60px;
+    overflow: hidden;
+
+    @media (min-width: $screen-sm) {
+      width: 212px;
+    }
+
     &:hover,
     &:focus {
       svg {
@@ -56,6 +52,15 @@
   }
 }
 
+.logo {
+  width: 191px;
+  height: 36px;
+  max-width: unset;
+  fill: $brand-grey-light;
+  margin: 0;
+  transition: 0.2s $easing;
+}
+
 .nav {
   display: inline-block;
 }

src/components/organisms/Header.tsx

@@ -16,7 +16,7 @@ export default class Header extends PureComponent {
           <div className={styles.headerContent}>
             <h1 className={styles.title}>
               <Link to="/">
-                <Logo /> kremalicious
+                <Logo className={styles.logo} /> kremalicious
               </Link>
             </h1>