Jump to content

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

Recommended Posts

  • 1 month later...
  • Replies 28
  • Views 31.4k
  • Created
  • Last Reply

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
  • 3 months later...
  • 3 weeks later...

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
  • 3 months later...
  • 2 weeks later...
  • 2 weeks later...

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

alt text

Link to comment
  • 7 months later...

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
  • 2 months later...
  • 3 months later...
  • 2 months later...

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

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

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
  • 1 month later...
  • 1 month later...
  • 2 months later...

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

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
  • 1 month later...

Archived

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

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.