Search disappears on iPhone

This topic contains 7 replies, has 2 voices, and was last updated by  Vinod Dalvi 2 months, 3 weeks ago.

  • Author
    Posts
  • #1973
    ian28
    Participant
    • Topics: 2
    • Replies: 5

    Hi,

    I have Primary Menu/ Drop Down selected and it works perfectly on PC & Tablet

    But if I look at my site on my phone the menu bar has been replaced by the ‘MENU’ word and you click it to display the menu categories on the site but the Search bar is now missing ?

    I replicated this on the PC by altering the window size to check for resolution on different size screens. So I decreased the size of my window until the menu bar disappears and defaults to the words ‘MENU’.

    Then when I open the ‘MENU’ drop down after clicking it – the search icon has disappeared completely ?

    Any ideas ?

    Thanks

    Attachments:
    You must be logged in to view attached files.
  • #1976
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 166

    Hi @ian28,

    I hope you are well today and thank you for your question.

    I can see in your mobile screenshot the search icon is displaying as shown in the attached screenshot. You have to click on this icon to display search form.

    Best regards,
    Vinod Dalvi

    Attachments:
    You must be logged in to view attached files.
  • #1979
    ian28
    Participant
    • Topics: 2
    • Replies: 5

    Hi,

    Ahh I couldn’t see it because it is black also…

    However, when I click it the search does not appear ??

    http://www.whodoido.com .. please also check on phone – works on PC ..

    Thanks

  • #1980
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 166

    It seems this is happening on your site because your site uses separate menus for mobile & desktop and also there is CSS conflict.

    You can resolve this issue by using following custom CSS code on your site as described on this page http://freewptp.com/how-to-use-custom-css-in-wordpress-site/

    
    #sidr-main li.search-menu a {
        display: none !important;
    }
    
    #sidr-main li.search-menu #searchform-standard {
        display: block !important;
    }
    
    #sidr-main li.search-menu form input#send{
        clear:both;
        float: none;
        display: block;
    }
    
    li.search-menu form #searchform-input-standard {
        width: auto;
        float: left;
    }
    
    li.search-menu form input#send {
        margin: 0;
        font-size: 18px;
    }
    
  • #1981
    ian28
    Participant
    • Topics: 2
    • Replies: 5

    Hi,

    OK now the search box appears but the magnifier Icon has disappeared ??

    OH, what is the CSS conflict ?

    Thanks

  • #1983
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 166

    We are always displaying search form now so we don’t need magnifier Icon therefore disabled it using above shared CSS code.

    For CSS conflict please read this post http://www.webteacher.ws/2010/08/26/resolving-conflicts-in-css/

  • #1984
    ian28
    Participant
    • Topics: 2
    • Replies: 5

    HI,

    I removed the:

    #sidr-main li.search-menu a {
    display: none !important;
    }

    As I think it looks better with the Mag Icon above the search box 🙂

    About the CSS conflict I just wondered if you knew what the actual conflict was so I didn’t have to sort through all the CSS – I’ve done quite a bit of styling to the Theme 😉

    Thanks for all your help and the super swift response to fixing my problem!

    Will leave you a suitable review *****

    Thanks Again

  • #1985
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 166

    Thank your for your review.

    Yes you are right you have to remove that CSS code to display magnifier icon on mobile devices.

    The CSS issue was specific to the search form displayed in menu which is resolved using above CSS code so you don’t have to worry now but still you want to see the issue then just temporary remove the above shared CSS code from your site.

    You are always welcome here 🙂

You must be logged in to reply to this topic.