how to adjust the search bar without moving on its position

Store Design
,

Topic summary

A user is experiencing an issue where clicking the search bar causes the search text to shift or move from its intended position. They’ve shared a screenshot and provided test site credentials for troubleshooting.

Proposed Solutions:

Two community members offered CSS-based fixes:

  • First solution: Targets the search modal with media queries (min-width: 990px), adjusting padding and height of #Search-In-Modal and positioning the predictive search element with absolute positioning at 900px width

  • Second solution: Suggests adding CSS to the bottom of theme.css file, focusing on border-radius adjustments for form elements and the search modal

Status: The discussion remains open with multiple CSS approaches suggested but no confirmed resolution from the original poster.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

niceeee_0-1681376211750.png
niceeee_0-1681376211750.png1778×170 18.7 KB

and I want to hide the search text when I click the search bar input

please help thanks

2

url: testing (makerlab-electronics-ph.myshopify.com)

pass: saboten

3

@niceeee i think it’s looks better
add below css code

@media (min-width:990px)
{
#Search-In-Modal {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    height: 4rem;
}
predictive-search[open] .predictive-search, predictive-search[loading] .predictive-search {
    display: block;
    width: 900px !important;
    position: absolute !important;
    left: -576px !important;
}
}

Ujjaval_0-1681378496861.png
Ujjaval_0-1681378496861.png1587×774 325 KB

4

Hi @niceeee

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

input#Search-In-Modal, .field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {border-radius: 20px !important;}

Regards,

San