atpluke Posted October 11, 2013 Share Posted October 11, 2013 I'm trying to add 2 rounded rectangle buttons to my navigation bar in the Five template. Is there a CSS code that will let me do this? Below is the test site. I'm trying to add the buttons around "Buy Tickets" and "Donate Now." http://atpwhitefish-test.squarespace.com Link to comment
ben8907 Posted November 24, 2013 Share Posted November 24, 2013 Hey! looks like you did it. would you mind sharing the CSS? I am trying to do exactly that on my site! https://ben-lebowitz-643n.squarespace.com Link to comment
atpluke Posted November 24, 2013 Author Share Posted November 24, 2013 Your service looks good! I ended up having to get a friend to help me. He found out how the nav items are identified. The items I wanted to highlight were the 8th and 9th items in the nav bar respectively. Below is the CSS: #main-navigation ul li:nth-child(8n) a, #main-navigation ul li:nth-child(9n) a { background-color: #EA0437 !important; color: #ffffff !important; padding: 10px !important; -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; -moz-transition: all 150ms linear !important; -webkit-transition: all 150ms linear !important; -o-transition: all 150ms linear !important; transition: all 150ms linear !important; } #main-navigation ul li:nth-child(8n) a:hover, #main-navigation ul li:nth-child(8n) a:focus, #main-navigation ul li:nth-child(9n) a:hover, #main-navigation ul li:nth-child(9n) a:focus { background-color: #eeeeee !important; /* match social nav links */ color: #000000 !important; } Link to comment
ben8907 Posted November 24, 2013 Share Posted November 24, 2013 Thanks! Really appreciate your timely response. Link to comment
tarynshea Posted March 1, 2014 Share Posted March 1, 2014 Hey guys- I am trying to do something similar, except my buttons will link to our social media pages. Would this work for that as well? www.traditionally-trendy.com I am not as tech savvy as you two, so any help would be greatly appreciated! Thank you! Link to comment
Finagraph Posted March 19, 2014 Share Posted March 19, 2014 This code is awesome! Thanks for sharing. I noticed an unintended side effect though. If you have a large sub-menu than the nth entry in the folder will also show the same formatting. For example, at http://www.finagraph.com you'll see the "Sign Up" button using this code as the 7th item. If I add anything else to the "more" folder, that 7th entry will also become a blue square. Anyone know how to make this code only apply to the main navigation bar? Thanks! Link to comment
Guest Posted June 25, 2014 Share Posted June 25, 2014 Does anyone know how to do this for the Marquee template? Link to comment
jmvan8 Posted July 8, 2014 Share Posted July 8, 2014 This code works perfect. However, I noticed the side effect with the button on the main menu and submenu in the 6th spot. You can see it here: http://www.livgeek.com/ A tweak to the code so the button only shows on the main navigation would be ideal. Thanks for any and all help! Link to comment
Guest Posted July 10, 2014 Share Posted July 10, 2014 Has anyone been able to get this to work with the devlin theme? I tried using the same code but to no avail. Link to comment
r3alistik Posted July 19, 2014 Share Posted July 19, 2014 You can actually use ANY HTML code in the place where you would normally just name your tab..IT WORKS!!!! However you are limited to your work space so I would actually use an editor to create my code and just paste it in there!! Much easier than trying to figure out what ids and class names you need Link to comment
rlonnett Posted March 6, 2015 Share Posted March 6, 2015 We really want to add this element in our Marquee template but I'm struggling to get this code to work. I'm not code savvy but changed the code above for the 8th and 9th elements to represent our 4th element on the navigation bar. nothing is happening when we inject this code into the custom CSS space. Does anyone know what I'm doing wrong?? #main-navigation ul li:nth-child(4n) a { background-color: #EA0437 !important; color: #ffffff !important; padding: 10px !important; -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; -moz-transition: all 150ms linear !important; -webkit-transition: all 150ms linear !important; -o-transition: all 150ms linear !important; transition: all 150ms linear !important; } #main-navigation ul li:nth-child(4n) a:hover, #main-navigation ul li:nth-child(4n) a:focus, { background-color: #eeeeee !important; /* match social nav links */ color: #032C !important; } Link to comment
rlonnett Posted May 14, 2015 Share Posted May 14, 2015 Shepman10 - did you ever figure out how to do this with the Marquee template? I've been wanting to do the same thing. Please let me know! Thanks. Ryan Link to comment
Guest Posted August 27, 2015 Share Posted August 27, 2015 any news on the Marquee template? Link to comment
Guest Posted November 6, 2015 Share Posted November 6, 2015 Hi r2alistik, can you post the HTML code you put in the link tab? You screenshot it above, but I would like to modify it and use it, because I'm not too savvy in this area. Thank you for your help. Link to comment
Guest Posted November 6, 2015 Share Posted November 6, 2015 Hi r2alistik, can you post the HTML code you put in the link tab? You screenshot it above, but I would like to modify it and use it, because I'm not too savvy in this area. Thank you for your help. Link to comment
Guest Posted November 6, 2015 Share Posted November 6, 2015 Hi r2alistik, can you post the HTML code you put in the link tab? You screenshot it above, but I would like to modify it and use it, because I'm not too savvy in this area. Thank you for your help. Link to comment
gschauz Posted December 24, 2015 Share Posted December 24, 2015 Maybe something like this? Works in Marquee. Cheers .main-nav ul li:last-child { border: solid 0px; padding: 5px; a:hover { padding: 10px; background-color: #d8f3fa; } a { padding: 10px; border: solid 2px; color: ##585962; background-color: none; } } Link to comment
cyan1 Posted January 25, 2016 Share Posted January 25, 2016 What is the order of operation? Do we add a link in the navigation bar then add this Custom CSS? Link to comment
Guest Posted April 1, 2016 Share Posted April 1, 2016 I would like to do the same thing with the Pacific template, so that I can have a donate button in the header. So far, this code doesn't show any changes at all. Anyone know how to get it working? Thank you! Link to comment
Guest Posted April 1, 2016 Share Posted April 1, 2016 I would like to do the same thing with the Pacific template, so that I can have a donate button in the header. So far, this code doesn't show any changes at all. Anyone know how to get it working? Thank you! Link to comment
Guest Posted May 14, 2016 Share Posted May 14, 2016 What changes could one make to make this work for the two buttons from the right, rather than just the first button from the right. Link to comment
Guest Posted May 14, 2016 Share Posted May 14, 2016 What changes could one make to make this work for the two buttons from the right, rather than just the first button from the right. Link to comment
Guest Posted May 14, 2016 Share Posted May 14, 2016 What changes could one make to make this work for the two buttons from the right, rather than just the first button from the right. Link to comment
Guest Posted May 14, 2016 Share Posted May 14, 2016 What changes could one make to make this work for the two buttons from the right, rather than just the first button from the right. Link to comment
atconnelly Posted May 18, 2016 Share Posted May 18, 2016 Hello, thanks for sharing these codes. Is there a way I can make this button in my nav bar open to a new tab when clicked? My last item in my navigation menu is a link to different site and right now I cant tell it to open to a new page. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.