Jump to content

Turning the last item on my navigation menu into a button (I am using version 7.0 Five template).

Recommended Posts

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

Link to comment
  • Replies 8
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, JNoons said:

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

Can you share the website link.

Link to comment
2 hours ago, JNoons said:

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

target the direct child only

#main-navigation > ul > li:last-child a
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation > ul > li:last-child a:hover,
#main-navigation > ul > li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}

image.png.cdb2ab73cdc20d6c85fbfeed0bf0f650.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you so much for your response. I am not very familiar with code and so not sure how to go about targeting the direct child only. The link is 'Donate Now' and it is the last item next to the navigation menu. Are you able to advise how exactly I change the code to target the direct link please? Sorry to ask what is probably a silly question... Thanks so much.

Link to comment
1 minute ago, JNoons said:

Thank you so much for your response. I am not very familiar with code and so not sure how to go about targeting the direct child only. The link is 'Donate Now' and it is the last item next to the navigation menu. Are you able to advise how exactly I change the code to target the direct link please? Sorry to ask what is probably a silly question... Thanks so much.

Since you not provide the url I tested the modified code with five template demo, and it work with any last menu on the header. The selector "> ul > li" is used to select the direct child

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 years later...

I'm also having trouble making my last item on my nav into a button, i've copied different codes from multiple sources including this one and nothing seems to be making the item turn into a button of any sort.

This is the website: https://www.danceathaven.com/

I want to turn the "PARENT PORTAL" into a button that acts/looks like the "Register Here" button or just has a box around it like the register here button. Is there a specific code that could help me?

Screenshot 2023-08-04 at 9.23.41 PM.png

Link to comment
On 8/5/2023 at 9:25 AM, HavenDance_23 said:

I'm also having trouble making my last item on my nav into a button, i've copied different codes from multiple sources including this one and nothing seems to be making the item turn into a button of any sort.

This is the website: https://www.danceathaven.com/

I want to turn the "PARENT PORTAL" into a button that acts/looks like the "Register Here" button or just has a box around it like the register here button. Is there a specific code that could help me?

Screenshot 2023-08-04 at 9.23.41 PM.png

Use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

div.header-nav-item:last-child>a {
    color: var(--primaryButtonTextColor);
    background-color: var(--primaryButtonBackgroundColor);
    border-color: var(--primaryButtonTextColor);
    padding: 0.2em 1em !important;
    border-radius: 18px;
}
header#header nav {
    flex-wrap: nowrap;
    align-items: center;
}

image.thumb.png.39e7deaa05f1451e95d955d3b0d8d8d8.png

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.