Adding cart icon only in mobile navbar (support forum; no response on peer to peer)

[SheilaB]

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;
}
}

[Prasant]

Hello Sheila,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-brand.img {
    width: 185px;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.