Docs

[Amma1]

Hi,

I am wanting to add a search field to the top bar and have followed the instructions here: https://community.theme.co/forums/topic/search-bar-in-topbar-inline-with-social-buttons/

However although there is a ‘top-bar-search’ selector now present in the html, it is empty?

I’ve attached a screenshot of what I’m trying to achieve. I have the menu on the left implemented already.

Thanks

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Amma1]

This reply has been marked as private.

[Friech]

Hi There,

Thanks, but the credentials above does not work.

Please confirm.

[Amma1]

Hi, sorry yes there was a problem with the user I set up. I have redone it, please try again

[Rupok]

Hi there,

Thanks for updating. I can see you have just added an empty div to the topbar. So not sure what you are expecting here.

If you are trying to add the search on topbar then follow this – https://community.theme.co/forums/topic/add-search-bar-to-the-top-bar/#post-736407

Hope this helps.

Cheers!

[Amma1]

Thanks very much, it turned out that there was a problem with my child theme which I have resolved now 🙂

I would like to put search (magnifying glass) icon to the right of the search box.

I have tried adding this to the css:

.topbar-search::after{
font-family: ‘FontAwesome’;
content: “\f002”;
color: #f2b724;
}

it seems to simply write out the characters ‘f002’ where I would like the search icon to go.. any ideas?

Thanks

[Jade]

Hi there,

Please try to add the code in your child theme’s style.css instead.

Hope this helps.

[Amma1]

Thank you 🙂

[John Ezra]

You’re most welcome!

[Amma1]

Hi again,

I’m trying to hide the placeholder ‘Search’ text that appears in the search bar by default.

This is what I’ve been trying but it doesn’t seem to work:

/* Search placeholder text */
.topbar-search ::-webkit-input-placeholder, .topbar-search :-moz-placeholder, .topbar-search ::-moz-placeholder, .topbar-search :-ms-input-placeholder, input::-moz-placeholder {
    display: none !important;
    opacity: 0 !important;
}

Any ideas?

[Lely]

Hello Amma,

Please update your CSS to this:

input#s::-webkit-input-placeholder,
input#s:-moz-placeholder,
input#s::-moz-placeholder,
input#s:-ms-input-placeholder,
{
 opacity: 0 !important;
}

Hope this helps.

[Amma1]

Hi,

no this still results in a faded ‘search’ text being present. I thought perhaps it was a text shadow so I se that to ‘none !important’ too but there is still text there 🙁

What else could I try?

[Friech]

Hi There,

You can add this under Custom > Global JavaScript in the Customizer.

(function($) {
   $(".search-query").removeAttr("placeholder");
})(jQuery);

Hope it helps, Cheers!

[Amma1]

Wonderful thank you!

[Author]

Posts