Как добавить searchbar и другие кнопки в хедер?

Question

Aure @Aure

HTML
CSS

Как добавить searchbar и другие кнопки в хедер?

Не могу добавить к моему хедеру эти 3 кнопки

Мой код (это весь код)

<!DOCTYPE html>
<html lang="en">
<head>
  <header class="header">
  <a href="" class="logo">Fresh market</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <link rel="stylesheet" href="style.css">
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Home</a></li>
    <li><a href="#about">Shop</a></li>
    <li><a href="#careers">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shop</title>
</head>
<body>
  
</body>
</html>

body {
	margin: 0;
	font-family: Helvetica, sans-serif;
	background-color: #f4f4f4;
  }
  
  a {
	color: #000;
  }
  
  /* header */
  
  .header {
	background-color: #fff;
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	position: fixed;
	width: 100%;
	z-index: 3;
  }
  
  .header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #fff;
  }
  
  .header li a {
	display: block;
	padding: 20px 20px;
	border-right: 1px solid #f4f4f4;
	text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
	color:green;
  }

  /* Big coder moment, да я гений просто зеленим залив без хекса */
  
  .header .logo {
	display: block;
	float: left;
	font-size: 2em;
	padding: 10px 20px;
	text-decoration: none;
	color:green;
	
  }

  .logo::before {
   
	content:url('imgonline-com-ua-Resize-HhpRdaDieHxuk8.png');
			display: inline-block;
			padding-right: 3px;
			vertical-align: middle;
		  }
  
  /* menu */
  
  .header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
  }
  
  .header .menu-icon .navicon {
	background: #333;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
  }
  
  .header .menu-icon .navicon:before {
	top: 5px;
  }
  
  .header .menu-icon .navicon:after {
	top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
	display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
	max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
	.header li {
	  float: left;
	}
	.header li a {
	  padding: 20px 30px;
	}
	.header .menu {
	  clear: none;
	  float: center;
	  max-height: none;
	}
	.header .menu-icon {
	  display: none;
	}
  }