Mobile Menu (Page Color Opacity) + Shopping Cart Icon (Number Position)

Hello!

I have been trying to resolve 2 issues, and for the life of me I can't seem to fix them myself! Any help would be greatly appreciated. 😃

Issue #1:

This is a small yet annoying thing: the number (quantity) of items in the cart isn't centred inside its background circle, and it is driving me insane. Is there a way to make it fit in the middle? (You won't see a number beside the cart unless you add an item through the SHOP page, because I have CSS hiding the quantity when at zero). See picture #1

Issue #2

I am trying to change the color of the page when my side mobile menu is open. I have CSS to control the opacity, but not the color! (it is currently white). I would like it to be black, same opacity. See picture #2

Thank you!!!
password for website: g

Hi,

What is site url?

https://thefolkpath.com/ password: g

 

Update : I have added a desktop overlay menu, and I hope to have the same black opacity on the page too! At the same time, I would like to extend the closing clickable area on the desktop menu (if you try, you will see it is only on the far right end side that it works, it would be great to have the whole page outside the menu). Thank you ❤️

Did you solve #1, #2 or still need help?

With closing clickable, far right end side works, because it is a part of burger menu

add this code to CSS box to increase width of clickable area

.header-burger.menu-overlay-has-visible-non-navigation-items {
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
}
button.header-burger-btn.burger.burger--active {
    width: 100% !important;
}

Thank you Tuanphan!

I was able to make adjustments that work both for desktop and mobile to extend the closing area of the overlay menu. 😃 Yay! And yes, indeed, I still need help with #1 and #2 if you are able to help. 

🙏

As a matter of fact, would you also be able to modify the code you gave me to make it apply ONLY to the DESKTOP overlay menu?

😃

Change to this

@media screen and (min-width:992px) {
.header-burger.menu-overlay-has-visible-non-navigation-items {
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
}
button.header-burger-btn.burger.burger--active {
    width: 100% !important;
}
}

Thank you!!! Just what I needed!

Can you please help me with problem #1 and problem #2 as well? I haven't figured out how to fix them.

(The opacity color of the page when overlay menu is open, and the position of the cart quantity number inside its circle background).

Thank you 🙏

#1. Use this CSS code

.icon-cart-quantity {
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
}

#2. You mean page content background color/opacity?

Yes! Exactly!

I want the colour to be black instead of white (like it is right now).

Use this CSS code

body.header--menu-open .section-background {
    background-color: black !important;
}

Thank you Tuanphan! 

The code didn't do exactly as I hoped, but I figured out another way to get the effect I was looking for.

But I have another problem now.

Can you help me change the coloured section that's right above the header on mobile from black to WHITE on ALL PAGES?
 

SEE PICTURE, SECTION ABOVE RED LINE:

Did you solve? It looks white to me

I solved it, yes!

I am still struggling with the problem of centring the number inside the background circle (shopping cart quantity), but I will reach out if I can't fix it myself.

I am very grateful for your help and checking in with me again. 😄

You can use this CSS code

.icon-cart-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
}