Typing hidden on mobile (using dropdown form)

Resolved katie
(@reachout)

6 years, 5 months ago

The search box works great on the desktop, but on mobile, the typing is hidden by the keyboard–the same problem as in this forum post. But I am using a dropdown menu, not a full width menu, and the solution in that other forum post created a full width menu. Is there a way to fix this problem using a dropdown menu?

This is not related, but I also have a second question: How can I move the search icon to a slightly lower position on the desktop, so that it is aligned with the other items in my menu? Right now, it is about 5-10px higher than the other items and would look better if it was lower.

Thank you!

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Vinod Dalvi
(@vinod-dalvi)

6 years, 5 months ago
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,
Thread Starter katie
(@reachout)

6 years, 5 months ago
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!
Plugin Author Vinod Dalvi
(@vinod-dalvi)

6 years, 5 months ago
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;
}
```
Thread Starter katie
(@reachout)

6 years, 5 months ago

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

Plugin Author Vinod Dalvi
(@vinod-dalvi)

6 years, 5 months ago

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.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Typing hidden on mobile (using dropdown form)’ is closed to new replies.

Tags