Jump to content

Adding a Custom call to action Button to the Nav Bar on the Five Template?

Recommended Posts

Posted

Hi, Im trying to add a call to action to the main navigation menu on the FIVE template.so far i manage to use code injection and custom css to create the button but can't find a way to add it to the end of the menu.

i've found some help topics talking about adding some css coding to customize the last item on the menu.. but is not what i would like, i want to add a much bigger button separate from the menu.the site is no live, thats why I'm not charing a link to the site.

attached to images the actual scenario and and image of what i want the end result to be.

Thank you in advance!

alt text

alt text

actual.jpg.9a48ad18537b3b5b945b80787b47db7c.jpg

need.jpg.67723e0c69130325ad836579e540816e.jpg

  • Replies 5
  • Views 2.3k
  • Created
  • Last Reply
Posted

hi,so far this is what i did to solve the problem:in the code injection section i've placed the button inside a container "dvcontainer"


<div id="dvContainer">
<a href="#" class="donateB" target="_blank">Donate Now</a>
</div>

and then using custom css i've placed into position (looks good in desktop view, not so good in tablet, and not showing in mobile)here is the css i used:


donateB {
 background-color: #A52A2A;
 border: none;
 color: white;
 padding: 12px 25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 20px;
 cursor: pointer;
 font-weight: bold;
 position: relative;
 float: left;
 marging-top: 15px;
}

a.donateB { 
 color: white;
}

a:hover { 
 color: white;
}

#dvContainer {
 position: relative;
 float:right;
 display: inline-block;
 width: 30%;
 height: 50px;
 margin-top:30px;
 background-color: #fff;
}

any ideas on how to take it to the next level is appreciatedThanks

Posted

Honestly, to achieve the look above, it is easiest to add Donate Now page or link to your main navigation and then use a few lines of CSS to style the last link differently. You can add the red background, add margin to add separation and change the font size.

It's much neater than adding HTML and then using JavaScript to move it around the DOM.

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.