Hello. I’ve added the code below in the Theme Options > Custom JS & CSS areas, respectively, as our manager wants the shopping cart out of the hamburger menu and on the navbar. Problem is, when I view on my mobile phone, due to the size of the logo, the cart gets pushed down while the menu bars stay inline with the logo. I would like it so the cart icon is there without “O Items” next to it, just a quick link to get to the cart. May I have some assistance in accomplishing this task?
OR
Can you assist on making the logo smaller just for mobile but still retain the full cart icon w/ number of items as it shows in the following image?
Either solution would work for me. Thank you in advance!
JS:
jQuery(document).ready(function($){
$(’.x-nav-wrap.mobile li.x-menu-item-woocommerce’).addClass(‘cart-menu-item-x’).insertAfter(’.x-btn-navbar’);
});
CSS:
/Cart Button in Mobile Header/
@media screen and (min-width: 980px) {
.cart-menu-item-x {
display: none;
}
}
@media screen and (max-width: 979px) {
.cart-menu-item-x {
float: right;
margin-right: 20px;
list-style: none;
margin-top: 44px;
display: block;
padding: 1px 5px;
background: #fff;
border: 2px solid #546e32;
border-radius: 5px;
icon: 24px;
font:
}
.cart-menu-item-x i {
color: #546e32;
padding-right: 5px;
}
.cart-menu-item-x {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
}