Target a: target :: before на flex-элемент не работает

Question

В нескольких проектах у меня есть position:fixed nav-bar.

Проблема возникает, когда я нажимаю на ссылку на странице.Страница прокручивается до элемента :target (ed).Из-за фиксированной панели навигации цель частично скрыта ( Link1 в коде ручки)

В качестве обходного пути я использую :target::before, который я нажимаю выше :target.В результате, когда я нажимаю на якорь, страница прокручивается до :target::before: цель: немного опускается и не закрывается панелью навигации.( link2 в коде ручки).

Это хорошо работает ... за исключением случаев, когда привязанный элемент гибкий (с display: flex).

Независимо от того, что я пытаюсь, когдаЯ нажимаю на якорь, страница прокручивается во flexbox, а не это ::before.

Могу ли я предотвратить это?

Ссылка: https://codepen.io/lehollandaisvolant/pen/JOOQeq

Answer 1

Что ж, после некоторой пробной версии я использовал это на родительской коробке.Родительский ящик должен иметь #id, чтобы фактическая коробка опускалась вниз под навигационной панелью:

padding-top: 100px;
margin-top: -100px;

Это не идеально, но оно выполняет свою работу.