HOW TO MOVE THE SEARCH BAR ON MY STORE PAGE TO THE TOP ON MOBILE DEVICE

Hi @savagewhite,

Thank you for reaching out.

I understand you’re having trouble moving the search bar to the top of your store page on mobile view.

It’s likely that you’ll need to adjust the CSS for your theme to achieve this.

Here’s a basic example of how you might do this:

@media only screen and (max-width: 600px) {
.header-search {
position: absolute;
top: 0;
}
}

This code will move the element with the class “header-search” to the top of the page when the screen size is 600px or less. Please replace “header-search” with the actual class or ID of your search bar.

Be sure to add this code to your theme’s custom CSS section.

I hope this helps!

i tried this but it did not work. how do i know the the actual class or ID of my search bar?

• This reply was modified 2 months ago by savagewhite.

Hi @savagewhite

To find the class or ID of your search bar, you can use your browser’s inspect tool. Here’s a simple step-by-step guide on how to do this:

1. Open your website on your browser (preferably Chrome or Firefox).
2. Right-click on the search bar and select “Inspect” or “Inspect Element” from the dropdown menu.
3. This will open up the developer tools panel at the bottom or side of your browser. The HTML for your search bar should be highlighted.
4. Look for the “class” or “id” attribute within the highlighted HTML. This will be the class or ID of your search bar.

Once you have this information, replace “header-search” in the given CSS code with the class or ID you found, and try again.

If you still need assistance, share your publicly accessible website URL or reach out to the theme developer for further assistance.

I hope this helps! If you have any other questions, feel free to ask.

i was able to see the ID but it still is not working. here ia a url
https://www.allywayfitness.ng/store

Hi @savagewhite

That’s because you are trying to move a widget from the sidebar to the header. Since you are using the Astra theme, you can follow this guide to add a search box on the header: https://wpastra.com/docs/search-box-shortcode-in-astra/

This is a third-party theme, and we don’t provide help & support for 3rd-party plugins or themes as they’re outside our support scope. It would be best to reach out to the theme developer for further assistance.

Thanks!