[Resolved] Make Sticky Menu Main on Mobile

Home Forums Support [Resolved] Make Sticky Menu Main on Mobile

Home Forums Support Make Sticky Menu Main on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #127216
    Martin

    Hi Tom,

    Is it possible to have the sticky menu replace the regular main menu and logo on mobile?

    Currently on mobile the menu button is at the top and the logo is large under the menu. The new sticky menu works exactly how I’d like the menu to work all the time on mobile. Can I make the sticky menu permanent and not just when someone scrolls?

    Thanks!

    PS: Is there a way to get notified by email when you add new features to the add-ons or theme?

    #127247
    Tom
    Lead Developer
    Lead Developer

    Hi Martin,

    Good question – what menu position is your menu set to currently?

    As for notification, the best place is to like us on Facebook – that’s where I announce updates and new add-ons.

    We also have a twitter account.

    https://www.facebook.com/GeneratePress
    https://twitter.com/GeneratePress

    #127250
    Martin

    My menu is currently set to the Primary menu location.

    The navigation is fluid/full width, float right, right aligned.

    The page is http://iwantoverflow.com if you’d like to take a look at it.

    #127371
    Tom
    Lead Developer
    Lead Developer

    Let’s give this a try:

    @media (max-width: 768px) {
          .site-header {
                display: none;
          }
          .navigation-clone {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
                z-index: 1;
          }
          body {
                padding-top: 60px; /* change to height of menu */
          }
    }

    That should do it ๐Ÿ™‚

    #127393
    Martin

    Thanks, that’s really close, but the menu doesn’t show up before people start scrolling. There’s just empty space at the top based on the padding.

    I don’t believe the navigation-clone is doing what it’s supposed to yet.

    If you take a look at the site you’ll see what I mean. http://iwantoverflow.com

    #127394
    Tom
    Lead Developer
    Lead Developer

    Ah, we may need to tell the browser what we’re doing is more important than the original styles.

    @media (max-width: 768px) {
          .site-header {
                display: none;
          }
          .navigation-clone {
                -webkit-transform: translateY(0) !important;
                -ms-transform: translateY(0) !important;
                transform: translateY(0) !important;
                z-index: 500 !important;
          }
          body {
                padding-top: 60px; /* change to height of menu */
          }
    }
    #127400
    Martin

    That was it. Thanks!

    #127403
    Tom
    Lead Developer
    Lead Developer

    No problem ๐Ÿ™‚

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