Mobile nav isn't centered and when tapped, it doesn't change colors like the pill button in the "about" section

Site URL: https://www.lpyluk.com/

Hello,

Site password: 09876

I have 2 questions:

1. I used this code to center my mobile nav, but somehow it's still left aligned and I'm not sure how to fix this:

/*main menu*/
.Mobile-overlay-nav {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%,-50%);
}
/*folder menu*/
.Mobile-overlay-folder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

2. When a pill button from the mobile nav is selected, it doesn't change color. However, the pill button from the "about" page shows a change of color when selected. Is there a way to fix this with css?

Thank you!!!

My testing

@bangank36 Thank you so much, it looks the same for me. I also added:

align-items: center;

as the last line and was able to center the text.

Thank you so so much 🙂 🙂

Also, is there a way to solve this problem?

Quote

2. When a pill button from the mobile nav is selected, it doesn't change color. However, the pill button from the "about" page shows a change of color when selected. Is there a way to fix this with css?

1 hour ago, LLLes said:

@bangank36 Thank you so much, it looks the same for me. I also added:

align-items: center;

as the last line and was able to center the text.

Thank you so so much 🙂 🙂

Also, is there a way to solve this problem?

I check that it is fine. Do you still need help?

@bangank36 Sorry for the late reply!!

For the color change for the buttons, I meant for the mobile navigation. It works on the desktop, but not for the mobile navigation. I did try to edit some code, however, it doesn't seem to work.

Thanks for your help!

1 hour ago, LLLes said:

Sorry for the late reply!!

For the color change for the buttons, I meant for the mobile navigation. It works on the desktop, but not for the mobile navigation. I did try to edit some code, however, it doesn't seem to work.

Thanks for your help!

Add to Design > Custom CSS

a.Mobile-overlay-nav-item:hover {
    background-color: black !important;
    color: white !important;
}

@tuanphan Thank you so so much! It worked great!