part of the search bar is hidden

Hi,

I inspect your page and found following custom css for search form:

<!-- start Simple Custom CSS and JS -->
        <style>
            .aws-container {
                width: 300px;
                margin: 0 auto;
            }

            .aws-container .aws-search-form .aws-form-btn {
                background: #fff;
                border-color: #4498c6;
            }

            .aws-container .aws-search-form .aws-search-btn.aws-form-btn {
                background: #4498c6;
            }

            .aws-container .aws-search-form .aws-search-btn svg {
                fill: #fff;
            }

            .aws-container .aws-search-field {
                border-right: none !important;
                border-color: #4498c6;
            }

            .aws-container .aws-search-form .aws-main-filter.aws-form-btn {
                border-left: none !important;
            }

            .aws-container .aws-search-field {
                border-top-left-radius: 10px !important;
                border-bottom-left-radius: 10px !important;
            }

            .aws-container .aws-search-form .aws-search-btn.aws-form-btn {
                border-top-right-radius: 10px !important;
                border-bottom-right-radius: 10px !important;
            }
        </style>
        <!-- end Simple Custom CSS and JS -->

This code is a reason why the search form in the header is looking like this. Please try to remove this custom css and check the search form one more time.

Regards

Thanks for the reply.

I wish to have the width as 300px for the search bar. When the custom css is deactivated the width becomes small.

Currently Custom CSS is removed. so you can check the link

https://natchatraa.com/clonecopy/

Regards

• This reply was modified 1 year, 12 months ago by Vimal.

Try following css:

#searchform-dropdown, #icon-searchform-dropdown {
    width: 360px !important;
}

Hi

Thank you it worked well.