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

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


Dago

Question

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

Link to comment
  • Answers 5
  • Created
  • Last Reply

5 answers to this question

Recommended Posts

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.

Link to comment

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

Link to comment

Archived

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


×
×
  • Create New...