Disable Post Navigation Flyout on Mobile

Thank you Jordan for the reply. But it’s not the mobile menu I’m referring to, but the sticky post navigation buttons that appear at the sides of each single blog post page to allow moving through the feed. It seems these are hidden on mobile layouts by default, but we elected to show them through a bit of CSS previously provided here:

@media only screen and (max-width: 767px) {
  .responsive #top .avia-post-nav {
      display: inline!important;
  }
}

I’m seeking to know if there is a way to disable the mouse-hover flyout behavior for these elements on mobile layouts.

Thank you.

Hi Jordan. Our site blog is at https://www.cascadehorseshows.com/news. The navigation buttons appear when viewing any blog post in desktop layout. It’s a standard feature of Enfold.

However, I’ve since decided to revert this change and hide the navigation buttons on mobile. I just think it’s a bit cumbersome in vertical orientation. Instead, we’ve injected a “Back to all news” link at the top of the single blog post content.

Still, if there is a known simple solution for my original question I’d still be interested in learning it in case we change our minds again, but if not then we are good for now.

Thank you.

Gary

Thanks Jordan.

I appreciate the suggestion, but that code actually disables the navigation controls altogether. They are already disabled by default on mobile. Were were actually trying to enable them while disabling the flyout animation. (Sorry if I wasn’t clear.) Incidentally, your CSS does not work for mobile in Enfold unless you add .responsive and #top selectors as so:

@media only screen and (max-width: 767px) {
    .responsive #top .avia-post-nav.avia-post-prev.with-image,
    .responsive #top .avia-post-nav.avia-post-next.with-image {
    display:none !important;
    }
}

I guess we can play around with the matrix and transform on these elements. I’m not well versed in CSS3 animation stuff, but I can probably figure it out from here.

Best,

Gary