Sub nav buttons not showing on smartphones

[Nicolas]

Hi,

I noticed that Sub nav buttons do not show on smartphones (there’s only a thin line for “previous nav left” and “next nav right”)
Readers can’t find them. Any idea if some css snippet could solve this bug?

Something that would define a specific size on screens below 1200px width
ex: .tribe-events-nav-previous tribe-events-nav-left and .tribe-events-nav-next tribe-events-nav-right

Thanks 🙂

[Hunter]

Hi Nicolas,

Welcome back! Does that behavior occur when reverting back to the default WP theme? I just tested on my local environment but was unable to replicate the behavior. You may need to add in some custom CSS to overwrite what your theme’s code is doing.

If you need help with that, reply back and I’ll do my best. Thank you for reaching out and have a great rest of your day.

Cheers!

[Nicolas]

Hi Hunter,

Thanks for getting back to me, I really appreciate.

I think you’re right, that my some custom CSS is needed to overwrite what my theme’s code is doing. Since I’m not that knowledgeable (yet) about customizing CSS, I’d very much need your help with that one. The idea would be to write a CSS snippet so the nav buttons show on smaller screens (smartphones & tablets).

Thanks again for your help, and if I can myself be of any assistance to you for the resolution of this issue, please shout.

Have a great day, and I look forward to your answer.

Cheers!

[Hunter]

Welcome back!

I did a bit of investigating and it looks like you’ll need to alter/edit the following CSS:

.tribe-events-sub-nav li a {
background: #666;
color: #fff;
display: block;
/* margin-bottom: -990px; */
padding-bottom: 1000px;
padding: 10px 20px;
position: relative;
white-space: normal;
}

Notice the ‘margin-bottom’ with -990px is commented out? It looks like this was the issue! Let me know if this helps. For more specific CSS responsiveness instructions, I’d recommend checking out this resource 🙂

[Nicolas]

Hi Hunter,

Thanks for pointing me in the right direction! However, I’m not yet that knowledgeable with CSS… would you have an extra tip to give me on how to solve this? I tried and tweaked the above CSS snippet, but I did not achieve anything conclusive…

Cheers!

[Hunter]

Hey Nicolas,

I attempted to visit your site but am getting a 404 error. Do you have a link to the working events page so I can help out with that CSS? Thanks!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts