How to add a call to action button in main navigation? (Marquee Template)

Site URL: http://www.arthurkorbielphotography.ca

Hey!

I want to add a call to action button/highlight button in my main navigation for the last link (Book Now)

I've already tried a bunch of other css codes , however they don't seem to work for me. When I add the following code: 

.main-nav li:last-child a {
   background: #000;
   color: #fff !important;
   padding: 10px 20px !important;
   border-radius: 20px;
}

It does exactly what I'm looking for, except for one thing - It applies the look to the last item in of the navigation headings/drop-downs (See Screenshot). I want it only applied to the "Book Now" in the main navigation, not the menu items in the dropdown menus.

My website is - www.arthurkorbielphotography.ca 

Use this code

.main-nav .nav-wrapper>ul>li:last-child a {
   background: red;
   color: #fff !important;
   padding: 10px 20px !important;
   border-radius: 20px;
}

I can't seem to get this, or any similar code to work to make the last item of my navigation a button. 

Is this code for 7.0 and if so, do you know how I might do it in 7.1?

Working here:
https://bassoon-circle-b5b6.squarespace.com/

password NWFC

2 hours ago, cherylr said:

I can't seem to get this, or any similar code to work to make the last item of my navigation a button. 

Is this code for 7.0 and if so, do you know how I might do it in 7.1?

Working here:
https://bassoon-circle-b5b6.squarespace.com/

password NWFC

nav>.header-nav-item:last-child a {
    background: red;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 20px;
}

This is awesome. Thank you so much. Weirdly, the text changes its position a little - it's a bit lower. Any idea why or how to fix it?

nav>.header-nav-item:last-child a {
    background: red;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 20px;
}
nav.header-nav-list {
    align-items: center;
}

AMAZING

thank you so much!
 

On this website, you can see i've done this (some time ago actually) but you'll see in the screenshot that it also affects the drop down menu. In this case Im using the below code. The :last-child piece doesn't seem to do anything for me. Can anyone help resolve this affecting the drop down menus as well. 

this template will change in the future; I realize its sun-setted, but for now, I'd like to resolve this. The website is: https://www.warpaintinternational.com/#about. See screenshot. 

.main-nav ul li:nth-child(7)  {
   border: solid 0px;
   padding: 5px;
   a:hover { 
     padding: 10px;
     background-color: #e04937;
 }
   a {
     padding: 10px;
     border: solid 2px;
     color: #fff;
     background-color: #e04937;
  
 }
 }

1 hour ago, kozanno said:

On this website, you can see i've done this (some time ago actually) but you'll see in the screenshot that it also affects the drop down menu. In this case Im using the below code. The :last-child piece doesn't seem to do anything for me. Can anyone help resolve this affecting the drop down menus as well. 

this template will change in the future; I realize its sun-setted, but for now, I'd like to resolve this. The website is: https://www.warpaintinternational.com/#about. See screenshot. 

 

.main-nav ul li:nth-child(7)  {
   border: solid 0px;
   padding: 5px;
   a:hover { 
     padding: 10px;
     background-color: #e04937;
 }
   a {
     padding: 10px;
     border: solid 2px;
     color: #fff;
     background-color: #e04937;
  
 }
 }

 

 

Change to this

.main-nav ul.cf>li:nth-child(7)  {
   border: solid 0px;
   padding: 5px;
   a:hover { 
     padding: 10px;
     background-color: #e04937;
 }
   a {
     padding: 10px;
     border: solid 2px;
     color: #fff;
     background-color: #e04937;
  
 }
 }