Previous Link on Month View Issue

Home Forums Calendar Products Events Calendar PRO Previous Link on Month View Issue

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1354298
    Sam Hitner
    Participant

    I’m having some issues with the month view – I changed the CSS so that the desktop version of the previous/next links look more like the mobile versions of the buttons, but unfortunately, something is going wrong. I see that the li for tribe-events-nav-previous basically disappears (and is no longer clickable) at the 768px breakpoint, but unfortunately, this does not happen when the page is larger than that and we end up seeing the blue box as you see in the screenshot. We’ve tried multiple jQuery and JavaScript solutions, but they haven’t worked. So I’m hoping a developer on your end can explain how the previous month disappears on mobile devices so that we can implement that on the other views. Thanks for the help!

    #1354322
    Sam Hitner
    Participant

    Nevermind – I basically fixed it by targeting the a tag instead of the li and used inline-block for desktop and block for mobile. So now it seems to be working properly.

    /*Month View*/
    .tribe-events-month .tribe-events-sub-nav span {display: none}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav li {margin-right:0}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a {color: #FFF; background-color: #4cb8e4; transition: all ease-in-out .5s !important; padding: 8px 15px; text-transform: uppercase; display: inline-block;}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a:hover, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a:focus, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a:hover, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a:focus {background-color:#009ad8 !important}
    
    @media (max-width:768px) {
    .tribe-events-month .tribe-events-sub-nav li a {background-color:#4cb8e4!important;display:block !important}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next {padding:0 !important}
    .tribe-events-month .tribe-events-sub-nav li a:hover, .tribe-events-list .tribe-events-sub-nav li a:focus {background-color:#009ad8 !important}
    }
    #1354542
    Courtney
    Member

    Thanks for that update Sam. Please let us know if you run into any other issues.

    Thanks
    Courtney 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Previous Link on Month View Issue’ is closed to new replies.