1

I currently have a slide-out search bar within the navbar of my website. It works pretty well, however the colors and general boxy layout don't really match that well.

What is a better way of doing this to blend in more? At the moment, it feels extremely bleak.

This is a screenshot of the current search bar:

Screenshot

Thanks

  • It may look boxy because the other elements (in your screenshot) are rounded. Maybe consider rounding the ends of the search field and adding a margin around it to make it consistent with other elements on the navbar? – Jason Cemra Jan 30 '17 at 1:37
1

There are two solutions:

  1. Change search bar position: When the search icon is clicked, a search bar appears below the navigation bar and the search icon changes to an X for closing the search. Another option is that clicking on the icon dims the whole website and displays a search bar in the middle of the screen. I would recommend one of these solutions.
  2. Change search bar style When the search icon is clicked, it moves to the left to reveal a search bar on its right (shown on the image below). The bar together with the icon could also get a darkened background.

enter image description here

| improve this answer | |
  • Thank for the answer, mate! :) I was originally going to make it so that the search icon floats to the left, however, I felt like it should be on the right, because after the user types in anything, I wanted it to be used as a submit button as well (if that makes sense). – GROVER. Jan 30 '17 at 3:51
  • Users already know that pressing enter will do the same thing. If you are really keen on using a submit button, it can appear on the right of the search field but I wouldn't do that. – Patryk Michalik Jan 30 '17 at 9:16
  • I'm well aware that they know, however, I still want it there and on the right :) thanks for the answer though, dude! +1 – GROVER. Jan 30 '17 at 9:17
  • No problem. Have a great day! – Patryk Michalik Jan 30 '17 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.