Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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!!!

Link to comment
  • Solution
1 hour ago, LLLes said:

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!!!

Try adding to Home > Design > Custom Css

.Mobile-overlay-close {
  z-index: 999;
}
.Mobile-overlay-menu {
  width: 100%;
}
.Mobile-overlay-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.6832bca323c3fb2290ba787558a696b1.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@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?

Link to comment
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?

image.thumb.png.3a42d2c8e462ab4a081721dcdb7b6b66.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.