Hide Icons and customize logo

Hi
I need help with these two points

1- Make logo bigger

2- Hide cart & wishlist icons from mobile

Please watch the video
https://www.loom.com/share/22bb51fd5c394f8d8afb06ee08e793ea

Thanks 🙂

Hello,

1. You can configure the logo in the Theme Settings > Header > Logo

2. Add this code to Mobile.

body .wishlist-info-widget,
body .shopping-cart basel-cart-design-3{
display:none!important;
}

Best Regards

Hi Elise
This line has error “display:none!important;”
Whishlist icon disappears but cart doesn’t. The problem is it disappears frob both header and bottom bar. I want to be hidden from header only

Thanks

Hello,

This is not an error. http://prntscr.com/ogr252 This is a notification. It is ok.

Best Regards

Hi

Ok. This is not error 🙂
But we still have 2 issues:
1- Wishlist Icon is hidden from header and bottom mobile bar as well. I need it to be hidden from only header.
2- Cart Icon still apprearing 🙂

Hello,

Replace the code with this one:

body .wrapp-header .wishlist-info-widget,
body .wrapp-header .shopping-cart{
display:none;
}

Best Regards

Thanks a lot, Elise
It works perfectly now.
Hidden from header
Sticky header still has them. DO we have to update the code to make it work for the sticky header also?

Hello,

Try this code, please:

body  header .wishlist-info-widget,
body  header .shopping-cart{
display:none;
}

Best Regards

Hi Elise

Thanks for the code.
It is the same as before. Hidden from header and still appear on sticky header.
I tried the last code alone and no change. And put it together with the previous one and no change

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body div.sticky-header .wishlist-info-widget,
body div.sticky-header .shopping-cart{
display:none;
}

Best Regards

Thanks a lot Elise 🙂
Working fine now
I wanna make logo bigger on mobile in header & sticky header. When I try to increase header height on mobile it gets bigger but logo is displayed the same. How to make logo bigger on mobile in both header & sticky header?

thanks 🙂

Hello,

You need to configure logo in the Theme Settings > Header > Logo. Make sure you have uploaded image big enough. It is not possible to set different logo size for sticky, mobile and desktop.

Best Regards

Hi Elise
Thanks for reply
These settigns does not affect mobile logo size. No matter what is done it is the same size. You can try it yourself. Changes appy on desktop only for header and sticky.
I wanna make logo look fine on mobile
Logo width was around 1300px and current is 400 and they are displayed the same. Changed settings and nothing happens on mobile
If there is no settings for it may be a code would solve it
Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 991px){
body .main-header .site-logo {
    width: 100%;
	height:auto;
	max-height:100%;
}
body .main-header .wrapp-header {
    min-height: auto;
}
}

Best Regards

[Author]

Posts