Adjusting the position of the search bar (full screen)

  • 22 July 2021
  • 3 replies

Userlevel 2

On my website I have set the search bar to full screen, so the search bar is displayed on a full screen overlay. On desktop it is fine, but on a smartphone, the bottom half of the search bar is covered by the keyboard.

Is there a way to move the search bar up on the overlay so people can see what they are typing without having to scroll up?



3 replies

Userlevel 7
Badge +4

It all depends on how this was implemented.  Is this an elementor popup?  Or is this part of the theme’s settings, and it has its own custom solution?  Do you have a link we can check out

Userlevel 2

No, it’s the standard Elementor Search Widget. You can set it to Full Screen so visitors get to see an overlay with the search bar in the center. But as you can see the search bar position isn’t optimized for smartphones and should be displayed some 50 px higher (or be adjustible).

Userlevel 2

Thankfully I got some pointers from the Support team. If you add this CSS to the Site settings, the input field is displayed 100 pixels from the top. For example, If you want the input field to display lower, change the 100 px to 150 px from the top:

.elementor-search-form__input {
position: absolute;
top: 100px;