Bricks now with Unlimited Sites & Upcoming Lifetime Price Increase

How to make search field in icon smaller


I have chosen the icon search field. But when you click on it, a full width page you see. How can i make that allot smaller? Its the search overlay that i need to have smaller

Hi Anushka,

unfortunately, this is not possible within the settings - but you can override the styling with custom CSS. Can you show me how it should look in the end, so I can give you some tips?

Hi timmse,

Possible to make it like this search field? I totally changed my life, changed my lifestyle. – HitMag Pro


Check this video to see it in action.

Here is the code I used. You may need to adjust that a bit to fit your navigation bar (for example, the top value).

.bricks-search-overlay {
  width: 100vw;
  height: auto;
  position: absolute;
  top: 60px;
  right: 0;
  bottom: unset;
  left: unset;

@media (min-width:768px) {
	.bricks-search-overlay {
		width: 320px;

.bricks-search-overlay .title {
  display: none;

.bricks-search-overlay .close {
  top: -6px;
  right: 6px;

Best regards,

Thank you very much. It looks awesome :ok_hand: