Get Jump link to work WordPress
- SOLVED
Trying to get a jump link to work. Copy and paste https:// trafficgenerationcafe.com /repurposing-content-recontent /#customrespond (there are spaces, so take those out)
Scroll to the area for comments. Begins with 44 Intelligent comments. I've tried to set up a jump link with "espresso yours below" to go to the comment form at the bottom. As it is, it is not jumping. However, in placing span tags around it, it will. Unfortunately, even with customizing the CSS, and perhaps I'm missing something, because even with a class on the span, it will not adopt the same custom font as the 44 Intelligent Comments.
So, I need the font to stay the same, but also the jump link to work right.
Answers (1)
mod mi answers:
Please try to remove the span from the <a> and change the styling for the :after element of the h3:
div#comments.entry-comments h3::after {
content: url(https://trafficgenerationcafe.com/wp-content/img/hLineBr3.png);
top: -70px;
position:relative;
}
You will se that the a works now because somehow the "top:-70px" rule of the h3 is "hiding" the a so it doesn't work. You have to think a different styling for the h3, maybe create another element to wrap the h3 around with those decorative elements.
Also if you try to add "data-scroll" on the a it will scroll smoothly like th either jump links on the page.
UPDATE:
The span inside an h3 has already different styling than the rest of it's parent:
div#comments.entry-comments h3 span {
font-size: 5rem;
font-family: sans-serif !important;
top: 15px;
position: relative;
}
You can add a css rule for the <a> without having to add a span inside it:
.custom-comment-title {
z-index: 10;
position: relative;
}
UPDATE 2:
Or add the .custom-comment-title class to the span and add the following rule
div#comments.entry-comments h3 span.custom-comment-title {
font-family: 'bebas-neue-book'!important;
font-size: 36px;
top: 0;
position: relative;
z-index: 10;
}
webpix comments:
Doesn't matter on the name or ID. It is correct. I went and put a span tag to indicate that it works. Issue is that without span, it won't jump. However, with span, it's not styling to the right font properly.
mod mi comments:
Ok I see! That's because the span inside the h3 is styled differently than the h3 as is in your css. It seems there is a conflict with position of the ::after of the h3.
Please try to remove the span from the <a> and change the styling for the :after element of the h3:
div#comments.entry-comments h3::after {
content: url(https://trafficgenerationcafe.com/wp-content/img/hLineBr3.png);
top: -70px;
position:relative;
}
You will se that the a works now because somehow the "top:-70px" rule of the h3 is "hiding" the a so it doesn't work. You have to think a different styling for the h3, maybe create another element to wrap the h3 around with those decorative elements
webpix comments:
Unfortunately, this doesn't help me one bit. With the span, the jump works, but the font isn't correct. Without the span, the jump does NOT work, but the font is correct.
So, the issue is making sure it works, even if a span is in place. I'm willing to bump up $5 more if someone needs access to this.
mod mi comments:
Please check my updated answer
mod mi comments:
Please check my second UPDATE in the answer too
webpix comments:
Thanks. Seems to work. However, text has shifted down
webpix comments:
Aha! Top: 0 did it!