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

    Hello. I have added some CSS to make the blog post navigation buttons visible on mobile layouts. This is all working well. However, I find the flyout animation (and the delay that comes with it) bothersome on mobile. While this makes sense for mouse input, it doesn’t work so well with touch, IMO. Is there any way to disable the flyout animation for this element? Thank you in advance.

    Gary

    #1140006

    Hey Gary,

    So do you want just a normal menu for mobile? Not the hamburger menu?

    Best regards,
    Jordan Shannon

    #1140018

    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.

    #1140021

    Hi,

    Provide a link to the site so we can look into this further.

    Best regards,
    Jordan Shannon

    #1140049

    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

    #1140050

    Hi,

    Add this to quick css:

    .avia-post-nav.avia-post-prev.with-image,
    .avia-post-nav.avia-post-next.with-image{
    display:none!important;
    }

    Best regards,
    Jordan Shannon

    #1140383

    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

    #1140787

    Hi,
    Sorry for the late reply, to enable them on mobile and also disable the flyout animation, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    
    @media only screen and (max-width: 767px) {
    .responsive #top .avia-post-nav {
        display: block !important;
    }
    .responsive #top .avia-post-nav:hover .entry-info-wrap {
        width: 0 !important; 
    }
    }
    

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.