[Resolved] Mellow Theme – Next/Previous Navigation Buttons Mobile

[Alex]

Hey,

I have a situation with Next/Previous Navigation Buttons on mobile. I don’t like how the navigation shows up.
Can you help me with some easy advice to resolve/adjust this appearance?
Capture here: https://ibb.co/TkRj4g6

Thanks!

[David]

Hi there,

try adding this CSS to your site:

@media(max-width: 500px) {
    #nav-below {
        margin-left: 20px;
        margin-right: 20px;
    }
    .nav-links {
        display: flex;
        flex-wrap: wrap;
    
    }
    .nav-links > * {
        margin-bottom: 0.25em;
        flex: 1;
        box-sizing: border-box;
        text-align: center;
    }
    
    .nav-links .prev,
    .nav-links .next {
        flex: 1 0 100%;
    }
}

[Alex]

Thanks David! Much better!
And if i want to display only previous and next button?

[Tom]

Try this:

@media (max-width: 768px) {
    .page-numbers:not(.next):not(.prev) {
        display: none;
    }

    .nav-links {
        text-align: center;
    }
}

[Alex]

Thanks Tom! 🙂
Problem solved!

[Tom]

Glad I could help 🙂

[Alex]

Sorry, one more question (for a pretty look 😀 ):
how can i put this buttons in the middle (both) or to the margins (“previous” to the left – “next” to the right)?

Many thanks!

[Tom]

Try the updated CSS here: https://generatepress.com/forums/topic/mellow-theme-next-previous-navigation-buttons-mobile/#post-1258698

Let me know 🙂

[Alex]

Is great now! 🙂 Thank you, Tom!

[Tom]

You’re welcome 🙂

[Author]

Posts