Jump to content

Call to action button on Navigation - AVENUE template

Recommended Posts

Hello

Any ideas on how to add a call to action on the navigation (subscribe to newsletter)? I currently just pasted a unicode character in the page description, but I would prefer a button. I tried all the other ideas for other templates provided in this forum but nothing seems to work. The URL is www.onebreath.eu

Thank you!!!

Link to comment
  • Replies 10
  • Created
  • Last Reply

Hi,

You can try this. It targets the last item in your menu on both desktop and mobile: alt text


 .Header-nav.Header-nav--primary .Header-nav-inner > a:last-of-type, .Mobile-overlay-nav.Mobile-overlay-nav--primary > a:last-of-type {
  border: 2px solid white;
  padding: 10px 30px;
  border-radius: 300px;
}

If you want to target only desktop, use this part:


 .Header-nav.Header-nav--primary .Header-nav-inner > a:last-of-type { 
  border: 2px solid white;
  padding: 10px 30px;
  border-radius: 300px;
}

For only mobile, use this:


 .Mobile-overlay-nav.Mobile-overlay-nav--primary > a:last-of-type {
      border: 2px solid white;
      padding: 10px 30px;
      border-radius: 300px;
    }






Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

past this code in custom css box


#topNav nav li:last-child {
   margin-right: 0px;
   background-color: burlywood;
   height: 38px;
   margin-top: 35px;
   border: 2px solid brown;
}

#topNav nav li:last-child a {
   margin-right: 2px;
   margin-top: -35px;
}




Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

This is great @mdhanjal, but it seems to be targeting the last items on the dropdown menus as well, not just the far right, last item on the top level navigation menu. For example, it targets Resources, which is the last item under the Mindfulness navigation item.

Any ideas how to isolate just the top level navigation items?

Link to comment

ok got it .

past this code on code injection in header


<a href="https://www.onebreath.eu/newsletter" class="myButton">NewsLetter</a>
<style>

 .myButton {
   background-color:#e6b17c;
   border-radius:3px;
   border:1px solid #fac291;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-family:Arial;
   font-size:13px;
   padding:6px 24px;
   text-decoration:none;
   text-shadow:0px 1px 0px #4d3534;
   float: right;
   margin-top: 68px;
   margin-right: 61px;
}
.myButton:hover {
   background-color:#e6b17c;
}
.myButton:active {
   position:relative;
   top:5px;
}
</style>


Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

Archived

This topic is now archived and is closed to further replies.

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