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

Home Forums Support Navigation Search Changes For PC – Different For Mobile?

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1231979
    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).

    #1232232
    David
    Staff
    Customer Support

    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.

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

    #1232496
    David
    Staff
    Customer Support
    #1232834
    Galen

    Thanks!

    #1233550
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.