Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


akorbiel

Question

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 

 

Screen Shot 2020-04-12 at 3.09.17 AM.png

Link to comment

6 answers to this question

Recommended Posts

  • 1
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;
}

 

Link to comment
  • 0

Use this code

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

 

Link to comment
  • 0
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;
}

 

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