Hola a todos estoy aprendiendo CSS y quería probar hacer una navbar que vi de una página. El tema es que no sé como hacer para que todos los elementos del navbar esten en sus correspondientes posiciones.
Resumen: Tengo los elementos puestos dentro del navbar pero no se como cambiarlos de lugar para que esten al igual que ese navbar. Que estilos me recomiendan usar o como haría? Gracias.
https://www.ovnipress.net/ --> Esta es la pagina web navbar
https://codepen.io/Tadiu/pen/eYZjMQM --> Esto es lo que intente.
Html:
<body>
<header>
<navbar>
<ul class="nav__list">
<a class="nav__item" id="logo" href="#logo"> <img id= "logo" src="https://www.solarenergy.org/wp-content/uploads/2016/03/icon_004240_256.png" /> </a>
<li class="nav__item"> <a href="#categorias">CATEGORIAS</a> </li>
<li class="nav__item"> <a href="#novedades">NOVEDADES</a> </li>
<li class="nav__item"> <a href="#ofertas">OFERTAS</a> </li>
<li class="nav__item"> <a href="#contacto">CONTACTO</a> </li>
<input type="search" placeholder="Buscar..." class="header__searchbar">
<a class="nav__login" id="login" href="#login"> <img id= "logo" src="https://zananerooz.com/wp-content/uploads/2018/03/User-profile.png" /></a>
<a class="nav__cart" id="carrito" href="#carrito"> <img id= "logo" src="https://images.vexels.com/media/users/3/132115/isolated/lists/dcaf6e695736ac3b2717a39dbe4c9a42-shoppingcart-icon-silhouett.png" /> </svg> </a>
</ul>
</navbar>
</header>
CSS(que hice y tiene todo centrado que es lo unico que pude):
body {
margin: 0px;
font-family: Montserrat, sans-serif;
}
#logo {
width: 60px;
/*margin-right: 20rem;*/
align-content: flex-start;
justify-content: flex-start;
}
.nav__list {
background: white;
box-shadow: 0px 0px 10px #cfd8dc;
padding: 1rem 0;
border-radius: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
height: 6rem;
}
.nav__item {
list-style: none; /*remuevo los puntos*/
margin-right: 1rem;
}
.nav__item a {
text-decoration: none;
color: black;
transition: all 100ms ease-in;
}
.nav__item a:hover {
color: #29e6a7;
}
.header__searchbar {
width: 200px;
padding: 2px 2px 2px 32px;
border-radius: 14px;
}