[Support request] Top bar for logged out mobile users only

[Damon]

Hi! I’m using the header for a custom menu. It works great for all desktop users. On mobile, it only works for logged in users. Is there an easy way to hide the header on mobile only, and then have the top bar or secondary nav appear in its place ONLY for mobile AND logged out users? Thank you for your hard work!

[Tom]

I’m having trouble seeing it at all – it seems to be pushed up above the viewport?

What about it doesn’t work for logged out users? By default, it should work for everyone. Are you using specific code or a plugin to make this happen?

Is the top bar or secondary nav active on the page at all? I’m not seeing them.

[Damon]

Thanks for catching another header issue! Fixed that.

Is there an easy way just to hide the header completely for LOGGED OUT users, on MOBILE ONLY? Forget everything else. I can take it from there.

[Tom]

You could try:

@media (max-width: 768px) {
    body:not(.logged-in) .site-header {
        display: none;
    }
}

[Author]

Posts