[Sam Hitner]

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

[Author]

Posts