Typing hidden on mobile (using dropdown form)

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

You can resolve both of these by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

@media screen and (max-width: 768px){
.is-menu.dropdown form {
    top: 9px;
    right: auto;
    left: 18px;
    }
}

.main-navigation li.is-menu a {
    line-height: 8px;
    padding-top: 14px;
}

Best Reagards,

Hi Vinod,

Thanks very much for this quick reply and assistance. There is still one problem: the position is fixed, but the typing is still hidden on the mobile device.

Here is what I currently have in the custom CSS:

li.is-menu path {
    fill: #fff;
}
@media screen and (max-width: 768px){
.is-menu.dropdown form {
display: block !important;
    position: static;
    top: 9px;
    right: auto;
    left: 18px;
    }
}

.main-navigation li.is-menu a {
    line-height: 8px;
    padding-top: 14px;
}

The first part (li.is-menu path { fill: #fff;}) is to make the icon white.

You can see that I have also inserted two more lines into your original suggested code:

display: block !important;
    position: static;

That’s because when I took those lines out, the icon worked fine on the desktop and tablet, but on the mobile it was not clickable at all. When I add those two lines back in, it becomes clickable again…but the typing is hidden by the keyboard popup.

So I am still looking for a fix to that problem. Let me know what to do; thanks again!

Please try changing your above shared CSS code as below.

li.is-menu path {
    fill: #fff;
}

@media screen and (max-width: 768px){
    .mean-container .mean-nav ul li.is-menu > a {
        display: none;
    }
.is-menu.dropdown form {
    display: block !important;
    position: static !important;
    top: 9px !important;
    right: auto !important;
    left: 18px;
    }
}

.main-navigation li.is-menu a {
    line-height: 8px;
    padding-top: 14px;
}

Hi Vinod,

Hmm, there is still a problem on the mobile. With the new code, the search icon is not visible now–just the search box–and when I click the search box to type in it, the same thing happens as before: the keyboard pops up and obscures the box, so I can’t see what I’m typing. More suggestions?

Thanks,
Katie

It seems your theme issue because for other themes the mobile menu scrolls with page scroll as displayed on the below site.

https://websitedemos.net/organic-shop-02/

Please contact the theme author to report and resolve it.