Megamarket – header- search – fullscreen2 – bar moves up and down page

[maltgeorge]

Hi

I am hoping you can help.
I am trying out your Megamarket style for your theme, (thank you for making this)

I have an issue:

When clicking on the search bar, it opens a full screen layout (this is fullscreen2) which I like. However I notice that the search bar itself moves up and down the page dependant on the Ajax search results found.

Scenario:

<li>
User clicks search bar in header > opens fullscreen search and displays "popular searches"
User types in a search query and the search bar moves up the page to make room to display results
User highlights text or deletes search query to below 3 characters and the search moves drops down the page.
If user then types in 3 or more characters the search bar moves back up the page.
Also when user has typed search query and has results, if the user clicks off of the search bar, but doesn't select one of the results, when they click back on the search bar, the bar will drop down the page and the results will vanish.
</li>

I personally find that this moving up and down makes me rather seasick 🙁

Is there a way to make it stay at the top of the page? I have been trying to inspect css in hope of figuring out a solution but sadly I haven’t, so I hope that you can help me.

I supply a link to screen recording located on my Google Drive: https://drive.google.com/file/d/1gqNnyLUzexeCoVu27_hzopOwP2ievc8x/view?usp=sharing

I checked and this also happens on your Megamarket demo page: https://woodmart.xtemos.com/megamarket/

Thank you
George

• This topic was modified 2 years, 2 months ago by maltgeorge.
• This topic was modified 2 years, 2 months ago by Bogdan Donovan.

Don’t worry, I believe that I solved it!

Isn’t that always the way? You bang your head against something for ages, and no sooner than you have asked for help and boom you find the answer for yourself!

I discovered this CSS:

.wd-search-full-screen-2 {
top: var(–wd-admin-bar-h);
display: flex;
align-items: center;
padding-top: 50px;
background-color: rgba(var(–bgcolor-white-rgb), 0.97);
transition: visibility .25s ease, opacity .25s ease;
–wd-form-height: 50px;
–wd-content-heigh: 80vh;
}
I changed display: flex; to display: block; and ta da! Fixed 🙂

BTW is “–wd-content-heigh: 80vh; supposed to have a “t” at the end of “heigh”?

Hello,

We are Glad that your issue has been Resolved.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts