[Resolved] Sticky navigation menu height on mobile

Home Forums Support Sticky navigation menu height on mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #342218
    Jamal

    Hi

    The sticky navigation menu item height doesn’t seem to be applied on the mobile sticky navigation. What am i missing? Thanks !

    P.s While creating this support topic this appeared and i thought you might be interested in case it was unintended.

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

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #342229
    Leo
    Staff
    Customer Support

    Hi Jamal,

    Just making sure…so basically you want the mobile header height to be different than sticky mobile header height?

    #342236
    Jamal

    Hi Leo

    I have not enabled mobile header, i just wanted options in Layout > Primary Navigation > Menu item height to be different than Layout > Sticky navigation > Menu item Height.

    On desktop everything works as it should but on mobile i can’t seem to make it work.

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

    #342282
    Leo
    Staff
    Customer Support

    So currently you have a mobile Menu Item Height set by clicking the mobile toggle in Customizer > Layout > Primary Navigation, and you want that height to be different when the user scrolls down?

    #342367
    Jamal

    I think i got it to work with this custom css, please let me know if there is a better way to do. Thanks

    @media( max-width: 768px ) {
        .main-navigation .main-nav ul li a,
        .menu-toggle,
        .main-navigation .mobile-bar-items a {
            line-height: 50px;
        }
    }

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

    #342421
    Tom
    Lead Developer
    Lead Developer

    Looks great, although you should be able to do that by clicking the mobile icon in Customize > Layout > Primary Navigation next to the menu item height option.

    #342429
    Jamal

    The sticky navigation part is what i was having problems with, Tom. I want the normal navigation at 80px and sticky at 50px but it’s not happening. I will send you a link so you see what i mean.

    Edit: Not sure if email was sent, it shows processing. Anyway here is the link

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

    #343050
    Jamal

    Tested this on another install and its still not working. Same value is being set for both the desktop and mobile sticky navigation.

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

    #343167
    Tom
    Lead Developer
    Lead Developer

    So you’re only having the issue on mobile, correct? Right now the sticky + static menu will use the same height on mobile (whatever you have set in Customize > Layout > Primary Navigation > Menu item height (mobile).

    A sticky height on mobile will likely come at some point, but I feel like the transition etc.. is overkill for mobile browsers. Settings a more narrow, static height on mobile seems to be best for UX.

    #343288
    Jamal

    I will use a narrower mobile menu item height, thanks for the clarification.

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

    #343511
    Tom
    Lead Developer
    Lead Developer

    No problem – I’ll see what I can do about the sticky height on mobile 🙂

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