[Resolved] Hiding Menus

Home Forums Support Hiding Menus

This topic contains 11 replies, has 2 voices, and was last updated by  Leo 2 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1186099

    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

    #1186124

    Leo Customer Support

    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;
    }
    #1186149

    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;
    }

    #1186171

    Leo Customer Support

    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.

    #1186205

    Scott

    Submitted

    #1186501

    Leo Customer Support

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

    Am I missing something here?

    Let me know 🙂

    #1187203

    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

    #1187507

    Leo Customer Support

    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.

    #1188142

    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

    #1188196

    Leo Customer Support

    That looks good to me!

    Glad you got it working 🙂

    #1188230

    Scott

    Thanks!

    #1188278

    Leo Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.