[Resolved] Hiding Menus

[Scott]

Hello,
I checked the forums a while back and was able to address my issue at first using the following:

—
.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}
—

That worked great until I turned my attention to the mobile version of my site and enabled the mobile header. When I did that 2 menus started showing up. If I remove the code above, then only the appropriate menu appears.

My issue is, I don’t want any menus to appear if the user is not logged in but I only want the correct menu to appear once they have.

Does anyone know the solution?

Thank you,
Scott

[Leo]

Hi there,

Can you try this CSS as well?

#mobile-header .menu-toggle,
.logged-in #mobile-header .menu-toggle {
    display: none;
}
.logged-in #mobile-header .menu-toggle {
    display: block;
}

[Scott]

So those two lines alone didn’t work and when I put them with these 2, hides when not logged in but shows double menus when logged in…

.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}

[Leo]

Are you able to send me a temporary login so I can test?

You can send it through Account Issues here:
https://generatepress.com/contact/

Be sure to keep both CSS there, caching plugins off (if any) and include the forum topic URL.

[Scott]

Submitted

[Leo]

Sorry when I used the token to login, I don’t see the double menu?

Am I missing something here?

Let me know 🙂

[Scott]

I had removed the CSS code so my menus would at least show on my site.

If you add:
.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}

The menu isn’t shown if the user isn’t logged in but, once they do log in, there’s both the regular menu and the mobile menu displayed (on desktop). Phone and tablet show correctly.

If I put in this code instead:
#mobile-header .menu-toggle,
.logged-in #mobile-header .menu-toggle {
display: none;
}
.logged-in #mobile-header .menu-toggle {
display: block;
}

It works perfectly on mobile but doesn’t hide when logged out on desktop.

If I do both, I get the double-menu when logged in on desktop again.

What I’m looking to do is have no menus displayed when a user is not logged in (regardless of device) and have the appropriate menu display when they are logged in (depending on the device they’re logged in on).

I am removing the code again so as not to have the double menu issue. Feel free to add it and test yourself. You can always create a free account on the site to see what I see.

Thank you

[Leo]

Try this for your full CSS:

@media (min-width: 769px) {
    .main-navigation, .logged-in .main-navigation{
        display: none;
    }
    .logged-in .main-navigation {
        display: block;
    }
}
@media (max-width: 768px) {
    #mobile-header .menu-toggle, .logged-in #mobile-header .menu-toggle {
        display: none;
    }
    .logged-in #mobile-header .menu-toggle {
        display: block;
    }
}

Also noticed that you are missing couple ; in your Additional CSS so make sure to get that fixed.

[Scott]

That didn’t seem to work for me but I did some tweaking and this appears to work:

@media (max-width: 768px) {
#mobile-header .menu-toggle, .logged-in #mobile-header .menu-toggle {
display: none;
}
.logged-in #mobile-header .menu-toggle {
display: block;
}
}

@media (min-width: 769px) {
#mobile-header .menu-toggle, .logged-in #mobile-header {
display: none;
}
.main-navigation, .logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}
}

For some reason, the mobile kept showing up on desktop and it was killing me.

Do you see anything wrong or missing from the code above?

Thank you,
Scott

[Leo]

That looks good to me!

Glad you got it working 🙂

[Scott]

Thanks!

[Leo]

No problem 🙂

[Author]

Posts