Five: How can I add a button to the top navigation bar?

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

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

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;
}

Thanks! Really appreciate your timely response.

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!

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!

Does anyone know how to do this for the Marquee template?

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!

Has anyone been able to get this to work with the devlin theme? I tried using the same code but to no avail.

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

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;
}

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

any news on the Marquee template?

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.

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.

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.

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;
}
}

What is the order of operation? Do we add a link in the navigation bar then add this Custom CSS?

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!

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!

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.

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.

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.

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.

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.