theshell.ch/site/_sass/_header.scss

/*------- GLOBAL ------*/

header {
  color: white;
	background-color: #000;
  width: 100%;
  display: flex;
  flex-direction: row;

  section.grow {
    flex-grow: 1;
  }
}

header .title {
  padding: 1em;
  text-transform: uppercase;
} 

/*------- MENU ------*/

	#menuMobile{
		display:none;
	}

	#menuTrigger{
		display:none;
	}

header .menu.desktop {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 100%;
    font-size: 1.15em;
    padding: 0 1em;
  }

  a:hover {
    color: #8e8;
  }

  a:visited {
    color: #6a6;
  }
}

@media screen and (max-width: 800px) {

	header .desktop, header .main.desktop {
		display: none;
	}

	#menuTriggerMobile{
		cursor:pointer;
		padding: 10px 20px;
		transition:1000ms;
		float: left;
	}

	#menuMobile{
		z-index:1;
		display:block;
		height:100%;
		position:fixed;
		transition:1000ms;
		background-color:#000;
		text-align:center;
	}

	.strip1, .strip2, .strip3 {
	    width:35px;
	    height:5px;
	    background-color:#4d0000;
	    transition:400ms;
	    margin:6px 0;
	}

	.cross .strip1 {
	    -webkit-transform:rotate(-45deg) translate(-9px, 6px);
	    transform:rotate(-45deg) translate(-9px, 6px);
	}

	.cross .strip2 {
	    opacity:0;
	}

	.cross .strip3 {
	    -webkit-transform:rotate(45deg) translate(-8px, -8px);
	    transform:rotate(45deg) translate(-8px, -8px);
	}

	.menuItem{
		padding:40px 20px;
		width:calc(100% - 40px);
		transition:500ms;
		font-size:4.5vh;
	}
}