Dago Posted August 11, 2019 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!
Mdhanjal Posted August 12, 2019 Posted August 12, 2019 share site url pls? Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me, Email me here: - mandeepsquarespace@gmail.com Hire Upwork: - https://www.upwork.com/freelancers/~01eed466e76c89e024 Behance: - https://www.behance.net/mandeepSquarespace Best Hourly Rate: - $15 Per Hour
Dago Posted August 12, 2019 Author Posted August 12, 2019 Hi mdhanjal, here is the linkhttps://awesomefive.squarespace.com pssw123456
Dago Posted August 12, 2019 Author 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
FreeIsBetter Posted August 14, 2019 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.