[Resolved] hide secondary menu once logged in

Home Forums Support [Resolved] hide secondary menu once logged in

Home Forums Support hide secondary menu once logged in

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #251286
    Steig

    Hello Tom,

    I’m dedicating the secondary menu to items that don’t need to be visible once a person is logged in. Is it possible to hide it?

    If not, could I swap out the menu items once logged in? Have completely different links?

    Thanks,
    Steig

    #251322
    Jamal

    Hi Steig

    I found this on the forum, might be the solution.

    https://generatepress.com/forums/topic/customising-primary-nav-menu/#post-103227

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #251325
    Tom
    Lead Developer
    Lead Developer

    Great solution, Jamal!

    If you want to outright hide it from logged in users, you can do this:

    .logged-in .secondary-navigation {
        display: none;
    }
    #251409
    Steig

    Thanks Tom & Jamal! Is it possible to make the secondary menu (placed above header) sticky so it won’t disappear when scrolling?

    #251444
    Tom
    Lead Developer
    Lead Developer

    You could try something like this:

    .secondary-navigation {
        position: fixed;
        width: 100%;
        top: 0;
    }
    
    .admin-bar .secondary-navigation {
        top: 32px;
    }
    #251468
    Steig

    the secondary nav does become hidden for logged in users, but the attempt at making it stay visible for user not logged in doesn’t seem to work. The secondary nav bar stays visible as scrolling starts, but when the header (with primary nav bar in it) transitions into the sticky aspect, the secondary nav bar just disappears.

    #251470
    Tom
    Lead Developer
    Lead Developer

    How are you adding the sticky header? Not using the Menu Plus options to only stick the primary menu?

    #251576
    Steig

    That is how I’m making the primary menu sticky. My hope for putting the secondary menu above the header is to make it sticky too, so it would be visible along with the primary menu when scrolling for those not logged in.

    I’m also noticing that the secondary menu cuts off part of the header. I need it to affix itself to the top of the header instead of riding over the top of it.

    #251638
    Tom
    Lead Developer
    Lead Developer

    What you could do is tell your primary navigation to sit below your secondary navigation.

    For example:

    .main-navigation.is_stuck,
    .main-navigation.navigation-clone {
        top: 40px; /* height of your sticky secondary navigation */
    }
    
    .admin-bar .main-navigation.is_stuck,
    .admin-bar .main-navigation.navigation-clone {
        top: 72px; /* height of your sticky secondary navigation + 32px */
    }

    As for the header, making something sticky moves the below element up under it.

    You could do this:

    .site-header {
        margin-top: 40px; /* height of secondary navigation */
    }
    #251657
    Steig

    I’ve tried various combinations of these suggestions and it’s just not working. The secondary nav does stay right at the top. As I scroll down the screen, it stays there while the header (with primary nav in it) scrolls underneath it.

    Then once header is gone, it switches things and the header becomes sticky (and is not as tall) and stays visible for the rest of the scrolling. But when it makes this switch, the secondary nav at the top just goes away.

    You can see it at https://arlinstitute.org

    From the various options above, I have this code in the CSS window:

    /* Secondary Nav sticky */
    .secondary-navigation {
        position: fixed;
        width: 100%;
        top: 0;
    }
    
    .admin-bar .secondary-navigation {
        top: 30px;
    }
    
    /* Keeps below element from moving under header */
    .site-header {
        margin-top: 30px; /* height of secondary navigation */
    }
    
    /* Primary Nav sits below secondary nav */
    .main-navigation.is_stuck,
    .main-navigation.navigation-clone {
        top: 30px !important; /* height of your sticky secondary navigation */
    }
    
    .admin-bar .main-navigation.is_stuck,
    .admin-bar .main-navigation.navigation-clone {
        top: 62px !important; /* height of your sticky secondary navigation + 32px */
    }
    #251659
    Tom
    Lead Developer
    Lead Developer

    I just made a couple changes to your CSS you posted – can you re-copy it and give it another try?

    #251662
    Steig

    That Works on desktop mode only and only when not logged in.

    When logged in, the secondary nav goes away (which it should) and then I have a grey bar that is visible in its place.

    On my iPhone, the header rides up underneath the secondary nav, so it’s not real visible when not logged in and sitting at the top. Scrolling down, it looks fine however.

    When logged in and scrolling, the header rides real low. But you had helped me fix that problem earlier with this code

    /* Brings main navigation header to top of screen */
    .main-navigation.navigation-clone {
       margin-top: 0;
    }
    #251663
    Steig

    Also on desktop mode, when logged in and scrolling, the header sits low. I can see the .main-navigation code line in there twice. Once with a margin-top of zero and once at 32px, so that must be the conflict.

    #251665
    Tom
    Lead Developer
    Lead Developer

    Let’s try this:

    /* Secondary Nav sticky */
    .secondary-navigation {
        position: fixed;
        width: 100%;
        top: 0;
    }
    
    /* Keeps below element from moving under header */
    body:not(.logged-in) .site-header,
    body:not(.logged-in) .mobile-header-navigation {
        margin-top: 30px; /* height of secondary navigation */
    }
    
    /* Primary Nav sits below secondary nav */
    body:not(.logged-in) .main-navigation.is_stuck,
    body:not(.logged-in) .main-navigation.navigation-clone,
    body:not(.logged-in) .mobile-header-navigation.is_stuck,
    body:not(.logged-in) .mobile-header-navigation.navigation-clone {
        top: 30px !important; /* height of your sticky secondary navigation */
        margin-top: 0;
    }
    
    .admin-bar:not(.logged-in) .main-navigation.is_stuck,
    .admin-bar:not(.logged-in) .main-navigation.navigation-clone {
        top: 62px !important; /* height of your sticky secondary navigation + 32px */
    }

    What that should do is only apply the spacing CSS when the logged-in class doesn’t exist.

    #251669
    Steig

    That is perfect for the desktop. but iPhone still has problems. When not logged in, the header slides up underneath the secondary nav when at the top. When scrolling down, it displays just fine. But when scrolling down and it looks fine, clicking the secondary nav to log in causes the menu to expand underneath the header, so it’s not real visible. You have to scroll back to top to make the secondary nav fully visible when expanded.

    When logged in, the black logged in bar that wordpress shows scrolls out of site when going down screen. I could live with that I guess, but it’s different behavior than that desktop version.

    On desktop, when logged in, the black wordpress bar takes the place of the secondary nav, which is great.

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.