I put Search Bar in Header but the Logo is Gone

[v4nz777]

Hi I add a search bar on the main menu area , i followed the steps here http://support.janstudio.net/forums/topic/change-search-bar/#post-10186

but the logo is gone,

also is there a possibility to make the search bar clearer like add some square around the search bar and put background color in the header area,

thanks in advance,

[v4nz777]

[v4nz777]

v4nz777 wrote:

i want to make the background(blue line)  gradient

like this

[Harry]

Hi,

1. Our theme doesn’t support .svg file, please try this plugin https://wordpress.org/plugins/svg-support/ or you have to upload .png, .jpg, .gif file

2. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.top-search {
	border: 1px solid #ccc;
	height: 42px;
}

3. Please go to Claue > Theme Option > Color Scheme > Header Background to change.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry, Thanks for your response,

1. I changed my logo to png(since svg logo cant display on desktop even using the plugin) but the line below is merging the logo.
2. Search bar line(solved, thank you very much!) but in mobile the search bar and logo was messed up.

Looking forward to your response.

All the Best!

[Harry]

Hi,

This issue because your logo bigger than logo of our client at topic http://support.janstudio.net/forums/topic/change-search-bar/#post-10186

Please change the css code

.home .header-4 .header__transparent + .header__bot {
	margin-top: 62px;
}

to

.home .header-4 .header__transparent + .header__bot {
	margin-top: 110px;
}

regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry Thank you very much.! it works,

ONE more thing: The mobile bug is still there(please try it)

all the best,

Van

[Harry]

Hi,

Please change code below code

@media only screen and (max-width: 736px) {
.top-search {
	top: 95px;
}
.header__mid {
	padding-bottom: 137px;
}}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry,

Thank you very much! it works very well,

One last thing: Is there a settings for mobile view to make the header visible but when you scoll down only the search bar is sticky, like this : https://www.lazada.com (try in mobile view)

Im really satisfied with your service and very proffessional

[Harry]

Hi Van,

I’m sorry it doesn’t have option to stick only search on mobile.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi harry thanks, I adjusted the padding so it becomes fit and I changed my logo to the right size too, but i have several bugs found in mobile,

1. search bar alignment here’s the settings I used: (please correct me with this 🙂

@media only screen and (max-width: 736px) {
.top-search {
top: 100px;
}
.header__mid {
padding-bottom: 20px;
}}

2. The Icons like cart, user, wishlist, etc. are much darker in mobile view but when I switched to desktop or wider screen its more visible.

Please Help

[Harry]

Hi,

1. Please change code to

@media only screen and (max-width: 736px) {
.jas-action a.cb.chp {color: #a5a5a5;}
}
.header__mid {
	padding-bottom: 38px;
}
.top-search {
	top: 165px;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry, I just changed the code to

@media only screen and (max-width: 736px) { .jas-action a.cb.chp {color: #a5a5a5;} } .header__mid { padding-bottom: 38px; } .top-search { top: 165px; }
as you instructed but this is what happend

1.the search bar becomes visible when only scrolled down.
2.the wishlist icon is not visible on mobile view.
please view screenshots
•mobile view – not scrolled down

•mobile view – scrolled down

•web view – not scrolled down

•web view – scrolled down

 

 

[Harry]

Hi,

I’m sorry the code i give you wrong.

Please change code to

@media only screen and (max-width: 736px) {
.jas-action a.cb.chp {color: #a5a5a5;}
.header__mid {
	padding-bottom: 38px;
}
.top-search {
	top: 165px;
}}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry,

Thank you very much,

web view is solved, BUT the problem in mobile view is still there, please check.

Regards

[v4nz777]

Hi Harry, in mobile view, please check the site in non-admin mode using different window, I hope this helps

[Harry]

I help you fix issue on your site when view without admin-bar

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry,

Thank you very much! I checked my site again and Its now fixed. 10/10 the best and professional support and very patient.

 

[Harry]

Could you give our theme 5 stars rating and good review at https://themeforest.net/downloads.

Thanks so much and have great week ahead!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[v4nz777]

Hi Harry, Thank you very much I just rated you 5 stars, you deserve it sir. God Bless!

 

[Harry]

Thank you so much!!!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts