How to change search layout

cytropics

Hi,
How do I get the search like this?

Thanks.

teitbite

cytropics Hi. Please try to move search module from "head-search" module position to "topbar-right" and let me know when this will be done so I'll see what styling changes may be needed to adjust it.

cytropics

teitbite

Hi. I have changed it, please take a look.

Thanks

aman204

cytropics Hi

-- Try add this to custom.css file and adjust right and top value accordingly :

.search input.button{content: "";display: block;position: absolute;right: 9em;top: 20%;height: 23px;width: 23px;}

-- Enable the options as seen in screenshot in module parameters of specific module

-- Upload the attached icon image in template/images directory and unzip it

searchbuttongif.zip

2kB

cytropics

aman204
Hi, thanks for the response. This is how it now looks.

aman204

cytropics This is how it now looks.

As suggested, You may require to adjust right and top value accordingly to position the icon right. Also, The same appears fine for me in desktop mode. Ref: Screenshot

cytropics

aman204

Hi,
I adjusted top and right, nothing moved. How do I get the icon like in your screenshot?

Thanks

cytropics

Okay, I clear the cache. Can you help me to adjust in mobile view?

teitbite

cytropics Hi added some adjustments to custom.css

.t3-topbar .search {
  float: right;
  margin-top: 5px;
}

/*style for search top bar search icon*/
.search input.button{
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  height: 23px;
  width: 26px;    
 }

looks to be ok now.

cytropics

teitbite

Thank you, one issue. When the page first loads, the icon is at top right.

When it is touched, it adjust in place.

Regards

aman204

cytropics Kindly check now. Have added another CSS declaration in here :

.t3-topbar .search {float: right; margin-top: 5px;position:relative; /*Added*/}