[Resolved] Navigation Search Changes For PC – Different For Mobile?

[Galen]

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).

[David]

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.

[Galen]

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;
}
}

[David]

That looks good

[Galen]

Thanks!

[David]

You’re welcome

[Author]

Posts