- This topic has 8 replies, 2 voices, and was last updated 8 years, 11 months ago by
.
-
Posts
-
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:
[code]@media on and (max-width:**px) {
.fixed-header-on .wpdreams_asp_sc-2{
position: fixed;
top: **%;
left:0;
z-index: 999;
width: 100%;
}
}[/code]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 ?
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.
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.
Thank you, but I still can’t see the search shortcode anywhere on that page in mobile view. Am I doing something wrong?
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.
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):[html]@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;
}
}[/html]The .asp_main_container class is very important here, as otherwise it would affect the results container as well.
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
Hi
I have solved the issue by moving the shortcode from default page description area to the themify module.
Perfect!
Thank you!
- You must be logged in to reply to this topic.