[Resolved] post navigation as button

Home Forums Support post navigation as button

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1035017
    Katarzyna

    Hi,

    I tried to use the search option in the documentation or in the support forum, but I can’t find the answer in my case.

    I want to change the navigation to a clickable button. I can style nav-previous as a button, but it’s not clickable, only the title of the article is a link. Can you help me how I can make the entire div clickable?

    Best regards,
    Krzysiek

    #1035144
    Katarzyna

    Ok, nevermind 🙂
    I accomplished it with css:

    .post-navigation .nav-next {
    width: 50%;
    text-align: right;
    margin-left: auto;
    }
    .post-navigation .nav-previous {
    width: 50%;
    text-align: left;
    }
    .nav-previous .prev a:before {
    content: “\f104”;
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-right: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    }
    .nav-previous .prev:before {
    content: “”;
    display: none;
    }
    .nav-previous .prev a, .nav-previous .prev a:visited {
    padding: 1em;
    line-height: 4em;
    background: transparent;
    border: 2px solid #e6b1b3;
    color: #e6b1b3;
    }
    .nav-previous .prev a:hover{
    background: #e6b1b3;
    border: 2px solid #e6b1b3;
    color: #fff;
    }
    .nav-next .next a:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: “\f105”;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
    }
    .post-navigation .nav-next .next:after {
    content: “”;
    display: none;
    }
    .nav-next .next a, .nav-next .next a:visited {
    padding: 1em;
    line-height: 4em;
    background: transparent;
    border: 2px solid #e6b1b3;
    color: #e6b1b3;
    }
    .nav-next .next a:hover{
    background: #e6b1b3;
    border: 2px solid #e6b1b3;
    color: #fff;
    }

    @media
    screen and (max-width: 1024px) {
    .post-navigation {
    display: inline-block;
    }
    .post-navigation .nav-previous {
    width: 100%;
    }
    .post-navigation .nav-next {
    width: 100%;
    }
    .post-navigation .nav-next a { display: block;
    text-align: center;
    line-height: 1.5em;
    padding: 0.5em;
    }
    .post-navigation .nav-previous a { display: block;
    text-align: center;
    line-height: 1.5em;
    padding: 0.5em;
    margin-bottom: 20px;
    }
    }
    footer.entry-meta {
    margin-top: 2em;
    text-align: center;
    padding-top: 2em;
    border-top: solid 2px #e6b1b3;
    }

    #1035187
    David
    Staff
    Customer Support
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.