Mobile Header is Different

Hi there,

Edit this CSS:

.site-header {
    border-top: solid 4px #91BED4;
}

to

.site-header, #mobile-header {
    border-top: solid 4px #91BED4;
}

Let me know if this helps :)

Thank you! That worked.

Any idea about the logo? It shows black on mobile.

Can you confirm that the branding type is set to logo?
https://docs.generatepress.com/article/mobile-header/

It's set to Site Title. I don't have an image as the logo. I figured the mobile Site Title would inherit the desktop styling.

Under colors/header, I have a blue for my Site Title that's only applying to the desktop Site Title and not the mobile version.

Ahh I see.

Try this CSS:

@media (max-width: 768px) {
    .navigation-branding .main-title a, .navigation-branding .main-title a:hover, .navigation-branding .main-title a:visited {
    color: #5babd3;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

Looks good now! Thank you!!!

I need a CSS course.

No problem :)

I did the free courses here to start with:
https://www.codecademy.com/catalog/language/html-css

Then it's really just learning how to use the browser inspect tool.