How do I change the colors of the menu items on the top of the page?

Site URL: http://www.barbalunga.com

I'm trying to help my friend change the menu colors on his website, such as News, About Alf, My Pledges, so they stand out more... maybe make the Vote one orange, etc..  I've tried some custom css examples i found online, but nothing worked.  Does anyone know something I can use so I can set, say "News" to green or "About Alf" to blue, and give me options to change colors until we get it looking good?  Thank you in advance for any time and thoughts.  

Hi. All items same color or different color?

We would like the option of having different colors for different menu items, such as blue for News and red for About Alf, like that.  I was able to change all the colors in the header at once, but that's not what we wanted, we wanted the different menu items different colors.

Add to Design > Custom CSS

div.header-nav-item:nth-child(1) a {
    color: red !important;
}
div.header-nav-item:nth-child(2) a {
    color: yellow !important;
}
div.header-nav-item:nth-child(3) a {
    color: violet !important;
}

Thanks I'll try it now!!  It worked!

When I click on the my email on your page, I can't get the email.

Thank you for the help with www.barbalunga.com

I was able to change the colors.  How would I select one to be bold?

Also, when I center the logo in the middle, the navigation bar gets bunched up on multiple lines.  When I shift it left, it looks a little better, but we would like to try it on the right.

Is there an option to make the logo centered and shift the nav bar to the right with custom css?  

Or, is there a custom CSS to have the logo centered, and the navigation bars spread out left to right on one line instead of bunching on multiple lines?  We would like it to go left to right on one line instead of being on 3 lines.   Thank you!!

I got it!!  I found an answer you posted last year, it worked!!

Uh oh, only now the social links are on top instead of on the right.  Do you know how I can get them back on the right?

13 hours ago, Aaronlife said:

Uh oh, only now the social links are on top instead of on the right.  Do you know how I can get them back on the right?

Which code did you add to make nav one line?

now we are starting to like it that way, maybe we will leave it

do you know if it's possible to have two logo photos on top?

22 hours ago, Aaronlife said:

now we are starting to like it that way, maybe we will leave it

do you know if it's possible to have two logo photos on top?

You mean add a second clickable image next to man image?

squarespace let's us choose a logo.  we placed the logo at the top of barbalunga.com.  we were wondering if it was possible to place a photo next to the logo, or if we would have to create a new logo from scratch?

5 hours ago, Aaronlife said:

squarespace let's us choose a logo.  we placed the logo at the top of barbalunga.com.  we were wondering if it was possible to place a photo next to the logo, or if we would have to create a new logo from scratch?

 

Clickable image or non-clickable image?

either is ok, it doesn't have to click

Add to Design > Custom CSS

.header-title-logo a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/06/27/07/22/woman-7286907__340.jpg);
    display: block;
    width: 350px;
    height: 350px;
}
.header-title-logo a {
    display: flex;
    justify-content: center;
    align-items: center;
}