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:



  • 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? Commented Jan 30, 2017 at 1:37

1 Answer 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

  • 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.
    Commented Jan 30, 2017 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.
    – user96349
    Commented Jan 30, 2017 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.
    Commented Jan 30, 2017 at 9:17
  • No problem. Have a great day!
    – user96349
    Commented Jan 30, 2017 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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