Dago Posted August 11, 2019 Share Posted August 11, 2019 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! Link to comment
Mdhanjal Posted August 12, 2019 Share Posted August 12, 2019 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 Link to comment
Dago Posted August 12, 2019 Author Share Posted August 12, 2019 Hi mdhanjal, here is the linkhttps://awesomefive.squarespace.com pssw123456 Link to comment
Dago Posted August 12, 2019 Author Share Posted August 12, 2019 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
FreeIsBetter Posted August 14, 2019 Share Posted August 14, 2019 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
Dago Posted August 15, 2019 Author Share Posted August 15, 2019 Thank you i'll look around for the code Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.