Mobile Header not displaying correctly

Hi @consumeh!

It looks like you’ve added a style in your CSS to make the logo larger – that’s what’s throwing off the alignment on mobile devices:

.site-logo-link .site-logo {
    min-height: 200px;
}

My advice would be to remove that style, and add this to your CSS instead:

@media (min-width: 768px) {
.site-branding .site-logo-link img {
    height: 200px;
}
}

This way you’re overriding an existing style to make the logo larger, and you’re only doing it on large screens. Now you have a nicely aligned header on mobile devices, and a smaller logo (which on mobile is good, since you don’t really have a lot of screen space available to begin with.

For make the logo sticky, can you describe a little more of how you’re picturing that? With a transparent logo like yours, you’d have text going behind the logo and showing through (making both the logo and the text behind it unreadable).

You’d need to add a background behind the logo, which totally changes the look of your header 🙂

You’re welcome! 🙂

Feel free to mark this thread as “Resolved” over in the sidebar if you’re all set!