- This topic has 2 replies, 2 voices, and was last updated 6 years, 5 months ago by
.
-
Posts
-
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,
KrzysiekOk, 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;
}Customer Support
Glad to hear that
- You must be logged in to reply to this topic.
