Navigation Search Bar

Hi Tom,

Website: http://www.isleofskyebedandbreakfast.com

I'm using the above css. Below is the css:

#maincontent {
margin-left: 20px;
margin-right: 20px;
background: transparent;
padding: 10px;.main-navigation .search-item {
display: none !important;
}

.main-navigation .search-item {
display: none !important;
}
.main-navigation .search-item .custom {
display: block !important;
}
.main-navigation .search-item .custom i {
font-size: 2em;
}

The custom link is as follows:
For the URL, add: #

For the Link text, add: <i class="fa fa-search"></i>

For the CSS class, add: search-item custom

Wasn't sure about the url being just # and nothing else? I've not turned something on or my code is wrong?

Thanks,
Graham.

Try moving that CSS to the top of your stylesheet - there may be an error somewhere in the file which causes browsers to stop reading CSS below the error.

That didn't work unfortunately. Never mind Tom, don't waste more of your time on this, I'll just do without for the time being.

So weird..

Might be worth validating your child theme CSS to make sure there's no errors: https://jigsaw.w3.org/css-validator/#validate_by_input

Also, it looks like you used some sort of child theme generator. It has enqueued the parent theme style.css file a second time, which is unnecessary. You can remove this by removing the function in "Appearance > Editor > Theme Functions (functions.php)".

Tom, I have to confess, I had the same issue. So not to take your time I used the original search provided by the theme without the modifications above or in this thread.
I am using the GP child theme and have checked my css. All is well.
Using !important on both search-item and search-item .custom did not display the search icon on the site and with the css class for sizing as well.

As always, thank you for your support!!

Weird, this CSS doesn't work?:

.main-navigation .search-item {
      display: none !important;
}

.main-navigation .search-item.custom {
      display: block !important;
}

If you're willing to give it another go with the above, let me know and I'll take a look at why it's not working :)

Thanks Tom! But I found the problem. There were conflicts I coded in error in the CSS child teme. I corrected them and it works like a champ.

Best regards!

Perfect! :)

Hello Tom,

I noticed that the icon of search does not work inside a post ?

Best regards.

Hmm, definitely should.. Can you point me to a post where it's not working?

For exemple :

http://www.maggeek.com/linux-mint-17-2-disponible-en-version-finale/#

Hmm, looks like there's a couple javascript errors on the page - probably being caused by a plugin.

First, can you clear your W3TC cache - if that doesn't work, you'll have to deactivate your plugins one by one until it works again so we can target the problem plugin.

Let me know :)

I use WP Fastest Cache and Autoptimize.

The problem seems to come from Autoptimize.

Hmm, maybe the merging of Javascript in Autoptimize is causing the error - this could be due to the JS coding of one of your plugins as well (I'm using autoptimize without any issue).

Since the last update of WP Fastest Cache plugin I encounter compatibility issues with Autoptimize and WordPress Popular Posts.

My Popular Posts are not displayed. I had to change the option in Autoptimize for reobtain a correct display of Popular Posts (add Forcing JavaScript to load into the header of the page).

I noticed that thanks to you, the search function in my posts no longer works correctly by fault of Autoptimize.

I have written to WP Fastest Cache and to Autoptimize them to explain the problem.

Tks for your help.