Change text color in navigation for single item

[Benjamin11]

Hello Weebly community,

I'm using the theme "Vue 2016 - Dusk" for a client project. Everything works very well but now the client asks to change the text color of the first menu text in the navigation bar. I know how to change the text color of all menu items in the navigation, but is there any possiblity to change the text color of just the first menu item?

Many thanks for your feedback,

Benjamin

[braybin]

@Benjamin1

You will need to target that specific menu item with CSS to change just one link's color. As far as I know Weebly doesn't offer that out of the box. If you are comfortable with it you can edit it from within the HTML/CSS of the template itself, or just throw some styling in the Header code (from within the settings menu). 

Ex.

<style>

.my-navigation li:nth-child(4) {

color: orange;

}

</style>

Obviously your class/id names will vary but that is what you will need. Target the navigation by class/id and then target the nested element in question. Not sure how savvy you are with CSS and the like so I'll include some links to get you going.

Resources:

CSS Selectors Reference (how you would target a specific element that is nested)

Nth child rule

How to use Chrome Dev Tools (can use any other browser's dev tools too, just my preference)

[daniel_swihart]

Hello,

I am attempting to separate my menu items by color (so that the buttons are different colors to match the same buttons lower on the page). When I try to do the nth-child code, it only allows me to do the number 1, and then both menu items are affected rather than just the first one. Could you help me figure out what's going wrong? My site is www.reachingfinancialgoals.com. Here is the CSS text I'm working with:

}

.nav li > a.wsite-menu-item {
display: block;
padding: 8px 12px;
border: 2px solid #ffffff;
border-radius: 2px;
background: #47a0d1;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: normal;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.nav li#active > a.wsite-menu-item,
.nav li > a.wsite-menu-item:hover {
border: 2px solid #ffffff;
background: #307296;
}
.nav li > a.wsite-menu-item:nth-child(1) {
background: #ffffff;
}
.mobile-nav {
display: none;
}