Jump to content

Avenue 7.0 template - make last header link a button?

Recommended Posts

I'm using the Avenue template on 7.0, I need to keep this template for its grid index styling, but I want to add a call to action button to the header. I've tried some code snippets I found in this forum and nothing has worked.

URL: https://www.stephanievecellio.com

Ideally would like the outlined pill style and solid on hover. 

Thanks for any help!!

Edited by StephV
added website
Link to comment
  • Replies 5
  • Views 161
  • Created
  • Last Reply

Top Posters In This Topic

I got this code to work: 

.main-nav li:last-child a {
   background-color: transparent;
  border-width: 2px; 
  border-radius: 300px;
  border-style: solid; 
  padding: 13px 26px !important;

}

But it moves the button out of center and I can't figure out how to get it in line with the rest of the header.

 

Screen Shot 2023-03-24 at 2.47.37 PM.png

Link to comment

It had something to do with the padding, so adjusting the top margin worked. It messed with the mobile menu so added more bottom margin too.

.main-nav>ul>li:last-child a {
   background-color: transparent;
   border-style: solid; 
  border-width: 2px; 
  border-radius: 300px;
  padding: 13px 26px !important;
  margin-top: 22px; 
  margin-bottom: 22px; 

}

Can anyone help me access the mobile nav though? This is what it does to mobile, which is fine but not ideal.

Screen Shot 2023-03-24 at 3.28.10 PM.png

Screen Shot 2023-03-24 at 3.30.08 PM.png

Link to comment
  • 2 weeks later...

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.