Fixed on the header on mobile device

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Fixed on the header on mobile device

This topic contains 8 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 5 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #13654
    Jie
    Jie
    Participant

    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 5 years ago by Jie Jie.
    Attachments:
    You must be logged in to view attached files.
    #13668
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13669
    Jie
    Jie
    Participant

    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.

    #13675
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13678
    Jie
    Jie
    Participant

    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 5 years ago by Jie Jie.
    Attachments:
    You must be logged in to view attached files.
    #13684
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13686
    Jie
    Jie
    Participant

    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.
    #13689
    Jie
    Jie
    Participant

    Hi

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

    Perfect!

    Thank you!

    #13698
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.