Rev 4249 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
.header {
position: sticky;
top: 0;
border-bottom: 0.1px solid lightgray;
padding: 10px 0;
width: 100%;
overflow: hidden;
z-index: 999;
}
.header__nav {
display: flex;
justify-content: space-between;
}
.header__left {
display: flex;
align-items: center;
gap: 10px;
}
.header__left > img {
object-fit: contain;
height: 40px;
}
.header__search {
display: flex;
align-items: center;
border-radius: 5px;
height: 34px;
color: gray;
cursor: pointer;
transition: all 0.2s;
}
.header__search:hover {
color: #000;
}
.header__search > input {
display: none;
border: none;
outline: none;
background: none;
}
.header__search.show {
padding: 0.5rem;
background-color: #eef3f0;
flex: 1;
}
.header__search.show > input {
display: initial;
}
.header__right {
flex-grow: 1;
& > ul {
display: flex;
justify-content: space-evenly;
gap: 1.5rem;
}
&.hide {
display: none;
}
}
@media (min-width: 768px) {
.header__right {
flex-grow: initial;
& > ul {
display: flex !important;
justify-content: initial;
}
}
.header__search {
padding: 0.5rem;
background-color: #eef3f0;
}
.header__search > input {
display: initial;
}
}