[Resolved] Mobile Header is Different

[Alirio]

My mobile header looks different than my desktop header. Logo Text is blue on desktop and black on mobile.

I also have a top blue line on desktop doesn’t show on mobile. Can’t figure out why? Any help would be appreciated.

Thank you!

Rio

[Leo]

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 🙂

[Alirio]

Thank you! That worked.

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

[Leo]

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

[Alirio]

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.

[Leo]

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 🙂

[Alirio]

Looks good now! Thank you!!!

I need a CSS course.

[Leo]

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.

[Author]

Posts