Jump to content

Create a last menu item button on marquee 7.0

Go to solution Solved by Ziggy,

Recommended Posts

Hi!

I am trying to create a button on the last menu item that has a purple background with white text.

I havent been successful but I managed to create something similar using an old code I had.

.main-nav ul li:nth-child(5) {    background-color: #6954af;    padding: 15px;}

 

Can someone help me make it into a property button?

Edited by LighthouseBZ
Added More informatoin
Link to comment
4 minutes ago, LighthouseBZ said:

property button

What's a property button?

Can you share your website URL?

5 minutes ago, LighthouseBZ said:

.main-nav ul li:nth-child(5) {    background-color: #6954af;    padding: 15px;}

Is this code in place on the website? What didn't work with this code?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sorry. That was a typo. It was meant to say a proper button.

The URL is https://www.diamantebelize.com/

The code I pasted is in place. That is working but that only changed the background to make it resemble a button.

I have googled sample codes to create a button but they didnt work for me.

I am trying to create a button like in the image with purple background and white text.

This is what I am trying to do but this code didnt work on my website.

https://forum.squarespace.com/topic/196168-turning-the-last-item-on-my-navigation-menu-into-a-button-i-am-using-version-70-five-template/

Screenshot 2023-11-01 at 2.20.09 PM.png

Link to comment

Try this CSS code:

.main-nav ul li:last-child {
  padding: 13px 26px;
  color: #fff !important;
  background-color: #624a9a;
  border-color: #624a9a;
  transition:ease-in-out 300ms;
  &:hover {
    color: #fff !important;
    background-color: rgba(98, 74, 154, 0.7);
    border-color: rgba(98, 74, 154, 0.7);
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Try this tweak:

.main-nav ul li:last-child {
  padding: 13px 26px;
  background-color: #624a9a;
  border-color: #624a9a;
  border-radius:12px;
  transition:ease-in-out 300ms;
  a {
    color: #fff !important;
  }
  &:hover {
    background-color: rgba(98, 74, 154, 0.7);
    border-color: rgba(98, 74, 154, 0.7);
    a {
      color: #fff !important;
    }
  }

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, LighthouseBZ said:

Thank you so much!

 

Looks great!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.