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

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


atpluke
Go to solution Solved by atpluke,

Question

  • Answers 28
  • Created
  • Last Reply

Top Posters For This 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
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!

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!

Link to post
  • 0
Guest

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

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!

Link to post
  • 0
Guest

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

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

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!

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!

Link to post
  • 0
Guest

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 post
  • 0
Guest

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 post
  • 0
Guest

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 post
  • 0
Guest

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 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.

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.

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...