Archived topic
Navigation Search Changes For PC - Different For Mobile?
5 replies · Started by Galen on April 8, 2020
Hi Guys. Hopefully this one is simple for you. I could not find an answer in past posts or the forum.
I am using navigation search. I have modified the PC/Tablet view to have the search box drop down below the nav, to have less width, and to align to the right below the search button. Here is the code I am using. It all works. Improvements welcome.
.navigation-search {
top: 100%;
}
.navigation-search.nav-search-active {
left: unset;
max-width: 400px;
}
But for mobile view I would like the navigation search to work as originally designed, on the same line, and with a max width of around 80%, aligned right.
Can you I achieve both this on mobile and what I am doing above for PC/tablet view? Thanks for the CSS help.
My site is currently not viewable (have not switched the DNS from the current site yet).
Hi there,
use a media query like so:
@media (min-width: 769px) {
/* Your CSS in here */
}Then it will only apply to the large screens.
Thanks. And if I want to have mobile at 80% width on it's search bar, but on the same line, while keeping the above changes for bigger screens (changed to a percentage width), do you see any problems with this CSS? It seems to be working correctly in preview at least.
@media (min-width: 769px)
{
.navigation-search {
top: 100%;
}
.navigation-search input {
width: 40%; float: right;
}
}
@media (max-width: 769px)
{
.navigation-search input {
width: 80%; float: right;
}
}
That looks good
Thanks!
You're welcome
