Looking to adjust the placement of the logo and search bar on the left side while extending the search bar further to the right. Struggling to get the desired layout? No worries, we've got you covered! Also need a join and log in button aligned to the right of everything. Having trouble positioning the submit button next to the search field? Check out this example for reference here
@import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins';
}
header>div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding-top: 12.5px;
padding-bottom: 12.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
margin-left: .3rem;
display: right;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.topnav .search-container button:hover {
background: black;
}
.search {
background-color: rgba(211, 211, 211, 0.463);
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li><a href="#"> npm Enterprise </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Solutions </a></li>
<li><a href="#"> Resources </a></li>
<li><a href="#"< Docs </a></li>
<li><a href="#"> Support </a></li>
</ul>
</nav>
</div>
<div class="searchmenu">
<ul>
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo">
</div>
<div class="topnav">
<div class="search-container">
<form>
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
<a href="#">Join Log In</a>
</div>
</ul>
</div>
</header>
<body>
</body>
</html>