Change PureBlog navigation/menu bar color

Greetings…The theme uses an Accent Colour method to change colours, which means select a colour and it changes all the elements using that colour. However, you can definitely change colours to individual elements, and if I understand correctly, you want the teal colour on the navigational bar to change. The theme CSS code for this is:

.navigation-top {
    background-color: #4e8287;
    font-size: 1rem;
    position: relative;
}

If you want to change that, add this to the Additional CSS tab in the customizer and then update the colour value to what you want. You will probably want to change the bottom border colour to match for submenus as well, which I included that code here:

.navigation-top {
    background-color: #4e8287;
}
@media (min-width: 768px) {
.main-navigation ul ul {
    border-bottom: 8px solid #4e8287;
}
}

For link colour, you can add this and update the colour to what you want:

a {color: #4e8287;}

Hope that helps? Plus, if there’s another element you want to change, let me know.

Thank you so much! Yes, this works almost perfectly, with one exception: when I click on a drop down option in the menu bar (for example, the BLOG) and scroll down, the color of the menu/navigation bar turns back to teal. Do you know how to adjust this?

First, glad to hear it worked (site looks great with the colour scheme).
As for the other issue, forgot about that one. Add this to your Additional CSs tab as well:

@media (min-width: 768px) {
.site-navigation-fixed.navigation-top {
    background-color: #000;
}
}

Wonderful – that worked. Thank you for your compliments!

One last color related question: I observe two lingering strips of navy blue above the menu/navigation bar of any page outside of the homepage. The (highest) darker navy strip contains my domain name. The lower lighter strip of navy is sandwiched between the darker color and my black menu/navigation bar.

Can I adjust it such that an image (ie: the homepage image) is behind the darker (highest) navy strip? How do I adjust the color of the lighter (lower) strip of navy blue? Or perhaps there’s a way to get rid of it? I don’t really need to have an extra strip of color above my menu bar. I’m happy if the image is directly adjacent to it as is the case with the homepage.

Thank you!

If I understand correctly, you would like the front page image to show behind the top header area of the inner pages? That would actually take a bit of work, but it may also look kind of odd because only a fraction of the image would show.

As for the lighter area, that is actually the background colour for the site header (the complete top area of your inner pages. However, that should not be showing, so I looked and see in your custom CSS, you have this:

.navigation-top {
    background-color: #000000;
    font-size: 1rem;
    position: relative;
}

Remove the position: relative; line and that area will disappear.

Incidentally, if you decide to change the header colour for your inner pages, you can do that with this code:

.site-header {
    background-color: #282f42;
}

The #282f42 is the default bluish colour.