Display on Mobile not correct

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

I have added search bar via ‘ShortCode’ but the search field is not displaying correctly on mobile see herE:?https://www.screencast.com/t/Q0qOCJC0rFqc

It is not just search form but also the text below it “Three Channel Monitors” also gets cut on mobile because it is an issue of your theme so please contact the theme support to resolve it.

Not sure what settings I need to adjust to have just a ‘Search icon’ display?

You have to just hode the added search shortcode on mobile so that only the search icon will be displayed.

Best regards,

Hi

Sorry I am confused by your answer. There is no theme we are using Oxygen Editor.

I inserted the shortcode, does this not working on Mobile display?

Do I need a different short code for Moblile display only?

Sorry I am confused by your answer. There is no theme we are using Oxygen Editor.

Then please contact the Oxygen site builder support to resolve it.

I inserted the shortcode, does this not working on Mobile display?

It works.

Do I need a different short code for Moblile display only?

No, you don’t need a seperate shortcode.

Contact Oxygen? Why it is your search bar that is not working.

So how do I get the ‘Search Field’ to display as just a Q icon on mobile display?

Maybe I don’t understand how your “search field’ displays on mobile, so could you send me a screenshot of the default display on mobile?

As maybe I am asking for something that is not possible

Contact Oxygen? Why it is your search bar that is not working.

It is not just the search form but also the text below it “Three Channel Monitors” also gets cut on mobile because it is an issue with the oxygen builder so please contact the plugin support to resolve it.

So how do I get the ‘Search Field’ to display as just a Q icon on mobile display?

You can display it as described below.

https://ivorysearch.com/docs/display-search-form-in-mobile-site-header/

Maybe I don’t understand how your “search field’ displays on mobile, so could you send me a screenshot of the default display on mobile?

You can see it yourself on the below demo website.

https://demo.ivorysearch.com/

So I think there is a lack of understanding on how your plugin works.

See this screenshot: https://www.screencast.com/t/9TA4rtU0

Why does the ‘desktop search field’ still display when ‘Mobile Search’ has been selected?

Do I need to ‘hide’ desktop search fields?

Yes, you can hide the desktop search bar on mobile by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

@media (max-width: 767px){
    div#shortcode-67-2616 {
        display: none;
    }
}

You can move and reposition mobile searc icon by using below CSS code.

body > .is-menu-wrapper {
    top: 70px;
    right: 160px;
}

Please make sure that you have configured a search form in the Menu Search options for mobile as shown in the below screenshot.

View post on imgur.com