Search Bar Expansion Causes Content to Shift Downward

[W-Schkulov]

I’m implementing a search bar in my React/Next.js application using styled-components. The goal is to have a search bar that appears above the “Mood Wave” heading when activated. The magnifying glass icon is located next to the “Mood Wave” heading and should remain fixed in position. When the search bar is expanded, it should push all the page content (including the “Mood Wave” heading) downward to make room for the search bar above. The search bar should be hidden by default and slide down when the magnifying glass icon is clicked.

I’m struggling to get the search bar to expand above the heading without affecting the position of the search icon.

US-Searchbar

[onemanwenttomow]

Hi @W-Schkulov

Can you please provide a link to the branch you are working on? It is difficult to answer without seeing some code.

thanks