Archived topic
Background Current - Cart
22 replies · Started by Javi on July 26, 2017
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!
Thanks for the donation!
I'm still seeing the CSS in your Simple CSS area. It's near the bottom, above your media queries.
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:

Are you adding code to display the mobile header at a wider width?
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;
}
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.
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!
Thank you! Glad we could help :)