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

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

Question

Posted (edited)

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

Edited by Dago

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 0

share site url pls?


Hi, I'm BITTU. A website developer with 8 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Best Hourly Rate :- $15 Per Hour

Share this post


Link to post
  • 0
Posted (edited)

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

Edited by Dago
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...