Archived topic
Search menu mobile styling
3 replies · Started by Hans on October 13, 2021
Hi,
I have changed the search field with this css and that works fine.
But now i would like to keep this styling also for mobile, how do i accomplish that?
Website: https://sandbox-one.nl
Hans
/* searchbar */
.navigation-search.nav-search-active {
top: 60px;
width: 300px;
left: auto;
background: #fff;
padding: 30px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
background: #efefef;
height: auto;
border-radius: 5px;
border: 1px solid #ddd;
color: #000;
}
.navigation-search.nav-search-active:before {
content: "Waar bent u naar op zoek?";
margin-top: -10px;
margin-bottom: 10px;
display: block;
font-size: 16px;
text-align: left;
}
/* searchbar */
Hi there,
you have an open @media query - see this in your Additional CSS:
/* Menu onderstrepen START */
@media (min-width: 769px) {There is no closing } so every line of code below it only applies to devices over 768px.
You need to the bracket where its required.
Hé David,
O man what a rookie mistake, totally did not spot this issue, thanks for the quick reply and finding my dumb mistake ;-)
Hans
Glad to be of help! :)
