Jump to content

Mobile code to make last navigation link a button

Go to solution Solved by tuanphan,

Recommended Posts

Hi folks,

I've followed this video to make my client's site multilingual. I've added css to the FR/EN last navigation link to have it appear as a button to switch languages. It all works well on desktop, but somehow on the mobile navigation, the box around both FR and EN doesn't show up. I'm struggling to find the mobile code blocks, would love anyone's insight on what I'm missing.
Screenshots attached of what it looks like on desktop vs mobile.

Thank you!

Screenshot 2023-03-26 at 18.50.05.png

Screenshot 2023-03-26 at 18.50.12.png

IMG_1826.PNG

IMG_1825.PNG

Link to comment
  • Replies 3
  • Views 288
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Thank you so so much! It worked perfectly!

I've tried adding a hover to it with this:
 

[data-folder="root"]>div>div:nth-last-child(-n+2) a:hover {
  background-color: #000;
  color: #fff;
}


And the black hover color works, but the text doesn't turn white. What do you think I'm missing?

 

Edited by VLabrie
Link to comment
On 4/10/2023 at 4:56 PM, VLabrie said:

Thank you so so much! It worked perfectly!

I've tried adding a hover to it with this:
 

[data-folder="root"]>div>div:nth-last-child(-n+2) a:hover {
  background-color: #000;
  color: #fff;
}


And the black hover color works, but the text doesn't turn white. What do you think I'm missing?

 

Use this

[data-folder="root"]>div>div:nth-last-child(-n+2) a:hover {
  background-color: #000;
}
[data-folder="root"]>div>div:nth-last-child(-n+2) a:hover div {
  color: #fff !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.