Ahoy there! I'm looking to turn the last one or two nav items at friendsofherringrun.org into buttons - a simple white outline or green background color would do the trick. Does anyone know how to target a specific Weebly nav item in CSS?
Cheers!
So, judging by your site's styles it looks like this might do the trick for you:
<style>
.wsite-menu-item-wrap.wsite-nav-5 {
border: solid; /*can do solid 1px white, mix and match to your specifics*/
background-color: lightgreen; /*can throw in different colors and hex, rgb, etc.*/
}
.wsite-menu-item-wrap.wsite-nav-5:hover {
background-color: lightblue;
}
</style>I tend to throw quick styles into the Settings > SEO > Header section to apply them quick and globally instead of messing around with the site template HTML/CSS.
The first part is the class for your item. It is an element that has a class of ".wsite-menu-item-wrap" and ".wsite-nav-5", which are combined into that one statement (having two classes next to each other in CSS means that you are targeting an element that contains both of the classes in question, fyi). Here you can see that I've put a border and a background color just for your benefit to see some of the options you have. Border documentation
The second part might be something you're interested in that changes the background color if you hover over that element.
Just a few things to note, if it doesn't immediately work, try putting an '!important' next to the attribute in question, like so:
background-color: red !important;
It is imperative that you have a space before it if you have it included. This allows the CSS attribute to trump any other declaration that has been previously applied. Weebly is a bit all over the map when it comes to things that are implicitly marked with '!important' so it comes in handy if you're not sure you've done something correctly.
If you have any questions or additional requests, please feel free to reach out and I can help where I can. Forgive me if I assume that you have little to no working knowledge of CSS. Explaining how things work tends to make for more confident users later down the road 
-Brian
So, judging by your site's styles it looks like this might do the trick for you:
<style>
.wsite-menu-item-wrap.wsite-nav-5 {
border: solid; /*can do solid 1px white, mix and match to your specifics*/
background-color: lightgreen; /*can throw in different colors and hex, rgb, etc.*/
}
.wsite-menu-item-wrap.wsite-nav-5:hover {
background-color: lightblue;
}
</style>I tend to throw quick styles into the Settings > SEO > Header section to apply them quick and globally instead of messing around with the site template HTML/CSS.
The first part is the class for your item. It is an element that has a class of ".wsite-menu-item-wrap" and ".wsite-nav-5", which are combined into that one statement (having two classes next to each other in CSS means that you are targeting an element that contains both of the classes in question, fyi). Here you can see that I've put a border and a background color just for your benefit to see some of the options you have. Border documentation
The second part might be something you're interested in that changes the background color if you hover over that element.
Just a few things to note, if it doesn't immediately work, try putting an '!important' next to the attribute in question, like so:
background-color: red !important;
It is imperative that you have a space before it if you have it included. This allows the CSS attribute to trump any other declaration that has been previously applied. Weebly is a bit all over the map when it comes to things that are implicitly marked with '!important' so it comes in handy if you're not sure you've done something correctly.
If you have any questions or additional requests, please feel free to reach out and I can help where I can. Forgive me if I assume that you have little to no working knowledge of CSS. Explaining how things work tends to make for more confident users later down the road
-Brian
