[Resolved] Background Current – Cart

[Javi]

Done, but still the same result :s
I have tried all the combinations with all the above CSSs but I can’t see the cart style like the menu items style. I believe I am doing something wrong (I am an amateur).
Anyways, donation on its way!

[Tom]

Thanks for the donation!

I’m still seeing the CSS in your Simple CSS area. It’s near the bottom, above your media queries.

[Javi]

Hi Tom, as always, you are right 😉 I have just removed this code and now the cart style has the menu items style. That is what I want 🙂

.mobile-bar-items.wc-mobile-cart-items {
    display: block;
}

Thanks!

Anyways, now the cart icon does not disappear in the “mobile” resolution but in the “tablet” one.
Tablet:

Mobile:

[Tom]

Are you adding code to display the mobile header at a wider width?

[Javi]

Yes, this one:

@media( max-width: 1060px ) {
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}
	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}
	.mobile-header-navigation.is_stuck {
		box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
	}
	.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		display: inline-block;
		float: right;
		clear: none;
		width:auto;
	}
	#mobile-header .menu {
		display: none;
	}
	.site-header {
		display: none;
	}
	.mobile-header-navigation .mobile-header-logo {
		float: left;
		display: block;
	}
	.mobile-header-navigation .mobile-header-logo img {
		position: relative;
		vertical-align:middle;
		padding: 10px;
		display: block;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.nav-float-left .mobile-header-navigation .mobile-header-logo,
	.rtl .mobile-header-navigation .mobile-header-logo {
		float: right;
	}
	.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
	.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		float: left;
	}
	.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		position: relative;
		float: right;
	}
	.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		float: left;
	}
	body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
		position: absolute;
		right: 0;
		top: 0;
	}
	body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
		left: 0;
		right: auto;
	}
}

.mobile-header-navigation .main-nav ul li a, 
.mobile-header-navigation .menu-toggle, 
.mobile-header-navigation .mobile-bar-items a {
    line-height: 72px;
}

.mobile-header-navigation .mobile-header-logo img {
    height: 72px;
}

[Tom]

At the top, inside the media query, add this:

.mobile-bar-items.wc-mobile-cart-items {
    display: block;
}

Right above where it says #site-navigation.

[Javi]

Now it is perfect 🙂 You are amazing! Thanks a lot to both of you! Congrats again for the theme and the support. All the best!

[Tom]

Thank you! Glad we could help 🙂

[Author]

Posts