Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
atpluke

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

Question

Recommended Posts

  • 6

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

Edited by atpluke

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Edited by rlonnett

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...