[Resolved] Make Sticky Menu Main on Mobile

[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?

[Tom]

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
Tweets by GeneratePress

[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.

[Tom]

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 🙂

[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

[Tom]

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 */
      }
}

[Martin]

That was it. Thanks!

[Tom]

No problem 🙂

[Author]

Posts