AutorÃa | 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 .2s;
}
.header__search:hover {
color: #000;
}
.header__search>input {
display: none;
border: none;
outline: none;
background: none;
}
.header__search.show {
padding: .5rem;
background-color: #eef3f0;
flex: 1;
}
.header__search.show>input {
display: initial;
}
.header__right {
display: flex;
gap: 1.5rem;
flex-grow: 1;
justify-content: space-evenly;
}
.header__right.hide {
display: none;
}
@media (min-width: 768px) {
.header__right {
display: flex !important;
flex-grow: initial;
justify-content: initial;
}
.header__search {
padding: .5rem;
background-color: #eef3f0;
}
.header__search>input {
display: initial;
}
}