Call to action button on Navigation - AVENUE template

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

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

Hello @mdhanjal, thanks so much for your reply! I tried all 3 options but nothing seems to work :-(Any ideas why?

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

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?

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>

and hide newsletter menu.

@mdhanjal thanks! I am a bit out of my league though here: how do I paste on code injection in header? I am not sure...I only know how to add CSS :-)Sorry I'm taking so much of your time :-)

https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

@mdhanjal I tried injecting in Header as per instructions, but noting happens. What do you mean by "hide newsletter menu"?

give me access. i will set.