Theme Horse

Hi Rufando,

Can you please provide us your site URL? where you are having a problem. Also please do check our demo site for the same issue.

Thank you!

Hello Rufando,

Can you please check deactivating the plugin one by one? If may be the plugin conflict.

Thank you!

Please go to Theme directory > header.php file. On line on: 52 you will find below line of codes.

</div><!-- .site-branding .navbar-brand -->

Now replace the above mention code with the code provided below.

</div><!-- .site-branding .navbar-brand -->
<span class="search-toggle mobile-view-toggle"></span>

NOTE: Make sure you make the child Theme to customize the code so that your customized code won’t get lost when updating the Theme to a newer Version in Future.

Now Go to ‘Dashboard > Appearance > Customize > Additional CSS’ and paste the below custom CSS Code.

.navbar .search-toggle.mobile-view-toggle {
	display: none;
}
@media (max-width: 991px) {
	.navbar .search-toggle.mobile-view-toggle {
		display: block;
		padding: 10px;
		position: absolute;
		top: 17px;
		right: 50px;
	}
	.search-block .search-form {
		width: 90%;
	}
}

According to the screenshot, we found you have replaced the provide code in wrong place. May be you have added some extra code before on top so the line no didn’t match. Please search a bit down side(lines) more to find the code </div><!-- .site-branding .navbar-brand --> and replace on it. Make sure while replacing the code the first line code is the same code that you have find. The objective is just to the add second line code that is about the search toggle.

Hi Rufando,

To make the mobile search icon more bigger just go to Appearance > Customize > Additional CSS and paste the below custom CSS code

@media (max-width: 991px) {
    .navbar .search-toggle.mobile-view-toggle {
        top: 10px;
        font-size: 20px;
    }
}

Welcome anytime Rufando.