Fixed on the header on mobile device

[JieParticipant]

Hi

How can I fix a search form (not compact) on the sticky header on mobile device?

I used the following CSS code as I also use the code to fix a sub menu which works perfectly:

@media on and (max-width:**px) {
.fixed-header-on .wpdreams_asp_sc-2{
	position: fixed;
 	top: **%;
	left:0;
  	z-index: 999;
  	width: 100%;
 }
}

The search form has been set to be visible only on mobile device.

It works sometimes a, but it will also keep scrolling sometimes.

If I use two search forms on that page (the second one is directly set to a fixed position, displaying only when the page scrolls down), how can I hide the second form when I am on the top part of the page ?

• This topic was modified 6 years, 10 months ago by  Jie.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

On which page can I see this, can you please link me to that? The /shop/ gives me an error message.

My guess is, that the fixed position might be the issue here. Some mobile devices does not like fixed positions at all, and usually the solution is to set an absolute position, and move the element before the closing body tag. That is however not same as the fixed position, and it may not work as expected.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[JieParticipant]

Hi

it’s accessible now.

But I use the same code to fix a menu to the header (also scrollable), it works fine, you can also check that: https://notin.store/brands/ .

Turn you browser to mobile size to see that form please.

[Ernest MarcinkoKeymaster]

Thank you, but I still can’t see the search shortcode anywhere on that page in mobile view. Am I doing something wrong?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[JieParticipant]

You using Chrome? I think it’s not accurate. There are too much inaccuracy caused by the browser.

Check the [shop] page, there are two shortcodes. The first one is hidden on mobile device.

The first only displays on desktop.

I use the simulator or mobile phone, can see the second search form.

• This reply was modified 6 years, 10 months ago by  Jie.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

I’m sorry, I have probably looked at the wrong url by accident. I can see it now.
I’m guessing there might be something overriding the CSS, so this is what seems to be working for me (as a test):

@media screen and (max-width:640px) {
  .fixed-header-on .asp_main_container.wpdreams_asp_sc-2{
      position: fixed !important;
      top: 100px !important;
      left:0 !important;
      z-index: 999 !important;
      width: 100% !important;
   }
}

The .asp_main_container class is very important here, as otherwise it would affect the results container as well.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[JieParticipant]

Thank you! It seems working.

Another little issue. I find that the compact form on desktop can only be clicked on the left bottom corner as the attachments show.

It works well backend but both safari and chrome have the issue .

Thanks

Jie

Attachments:

You must be logged in to view attached files.

[JieParticipant]

Hi

I have solved the issue by moving the shortcode from default page description area to the themify module.

Perfect!

Thank you!

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts