Codeinwp / Codeinwp/neve

Offset anchors

Open
#3,818 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
PHP
Stars
306
Forks
88
Avg merge
2d 16h
Merged PRs (30d)
12

Description

Description:

A user from Neve's Facebook group is using a stick to top header. When having a stick to top header, whenever you use an anchor, the anchor will go under the header, and it will not be visible. I was able to provide a solution for our user and here's what I wrote:

Ah, I understand what you mean now. I'm not sure we can provide a solution for the theme. I will open an issue on GitHub to discuss the matter with my colleagues. Until then, here's a custom solution that you can implement by yourself.
So let's say you have a title where the anchor goes to. Whenever you add your anchor, add a class also. Let's say we name our class 'offsetanchor'. You also need to add the following code to Customizer:

.offsetanchor::before{
content: '';
display: block;
height: 230px;
margin-top: -230px;
visibility: hidden;
}

Modify '230px' for height and margin-top with the offset you need. The margin-top is negative. Here's a video of how this would work: https://vertis.d.pr/v/CEPKvt
I hope it helps!

I'm not sure if we can have a better solution inside the theme.

Alternatives:

We can write a documentation about offset anchors.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file or test is named in the issue. Start by reproducing an anchor jump with a sticky top header and inspect the theme's Customizer-related styling; define whether the result should be a built-in offset or documentation for the existing workaround, then verify that anchored content remains visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, wordpress
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.