Фиксированная верхняя панель закрывает заголовок, к которому я прыгаю

Question

Я знаю, что этот код ДЕЙСТВИТЕЛЬНО запутан, но это мой первый проект, и я все еще учусь правильно выравнивать код. Я пробовал маржу с h2 :: before в CSS, вроде работало, но с этим возникли другие проблемы, связанные с формированием текста. Я видел, что можно добиться желаемого результата с помощью JavaScript, но я в этом полный нуб. Надеюсь, некоторые из вас помогут мне решить эту проблему, заранее спасибо.

function openNav() {
  document.getElementById("mySidenav").style.width = "260px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

body {
  background-image: url('https://i.imgur.com/oGNxInf.jpg');
  background-size: cover;
  margin-top: ;
}

h1 {
  position: relative;
  text-align: center;
  color: orange;
  padding: 30px 50px;
  margin-left: 0px;
  bottom: 15px;
}

figure {
  text-align: center;
}


/*nav{
		background-color: white;
		background-size: ;
		/*overflow: hidden; hat verhindert, dass Fenster aufpoppen
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		margin: 20px 20px;
		padding:20px 20px;
	} */


/*.topbar a{
		float: left;
		color: #f2f2f2;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
	}
	.topbar a:hover {
		background-color: gray;
	}*/

.input {
  float: left;
  text-align: ;
  padding: 5px 0px;
  margin: 10px 0px 10px 800px;
}

button {
  float: left;
  text-align: center;
  padding: 3px 3px;
  margin: 10px 0px 10px 0px;
}

.acc {
  float: left;
  margin: 10px 0px 10px 60px;
}

ul ul {
  float: left;
  display: none;
  background: black;
  top: 100%;
  padding: 0px 0px;
  width: 100%;
}

ul li:hover>ul {
  display: block;
}

ul li {
  display: block;
  float: left;
  list-style: none;
  position: relative;
  font-size: 6;
  padding: 0px 0px;
  text-align: center;
}

#topbar {
  background: black;
  background-size: ;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 0px;
  margin: 0;
  border-radius: 0;
  display: inline-table;
  width: 100%;
  z-index: 2;
}

ul:after {
  content: "";
  clear: both;
  display: block;
  padding: 0px 0px;
}

ul li:hover {
  background: gray;
  padding: 0px 0px;
}

ul li:hover a {
  color: white;
}

ul li a {
  display: block;
  padding: 15px 40px;
  color: orange;
  text-decoration: none;
  font-size: 100%;
}

ul li ul {
  display: none;
  position: absolute;
  padding: 0px 0px;
}

ul li ul li {
  width: 100%;
  padding: 0px 0px;
  margin: 0px 0px;
  text-align: center;
}

.li {
  width: 150px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  background-color: black;
  overflow-x: hidden;
  padding-top: 30px;
  transition: 0.5s;
  padding-left: 5px;
}

.sidenav a {
  padding: 8px 8px 30px 10px;
  font-size: 20px;
  color: orange;
  display: block;
  transition: 0.5s;
  text-decoration: none;
}

.sidenav a:hover {
  color: white;
}

.sidenav .close {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 30px;
  padding-top: 0px;
}

.konto {
  color: orange;
  padding-left: 10px;
  padding-bottom: 20px;
  text-decoration: underline orange;
}

.Header {
  position: relative;
  width: 1050px;
  height: 100px;
  background-color: brown;
  padding: 0;
  margin-top: 160px;
  left: 300px;
  z-index: 1;
}

.Header a {
  position: relative;
  padding: 0px 50px;
  text-decoration: none;
  color: orange;
  bottom: 50px;
  left: 140px;
}

.Header a:hover {
  color: white;
}

.textblock {
  position: relative;
  border: solid 3px;
  width: 1045px;
  height: 3500px;
  margin-top: ;
  left: 299px;
  background: rgba(100, 100, 100, 0.5)
}

.text {
  width: 800px;
  padding-left: 20px;
}

h2 {
  border-bottom: solid 1px black;
  padding-top: 0px;
  cursor: pointer;
  padding-left: 20px;
  margin: 0;
  position: ;
  top: -20px;
}

ol li {
  padding: 10px;
  margin-top: px;
}

.anchor {
  position: relative;
  top: ;
}

details>summary h2 {
  color: black;
  padding-top: ;
  cursor: pointer;
}

details summary {
  list-style: none;
}

summary:before {
  content: "֍";
  color: red;
  cursor: pointer;
  position: relative;
  top: px;
}

details[open] summary:before {
  content: "֎";
  position: relative;
  top: px;
  cursor: pointer;
}

summary {
  height: 100;
  margin: 0;
  padding: 0;
}

h2::before {
  display: block;
  content: "";
  margin-top: ;
  padding-top: ;
  pointer-events: none;
}

p {
  position: relative;
  top: -20px;
}

Answer 1

Вы можете попробовать использовать псевдокласс: target и добавить его следующим образом .anchor:target{padding-top:100px}

Он будет добавлять отступы только при использовании тега привязки.