Блог

Я пытаюсь исправить свой код в проекте из freecodecamp. Я новичок, и у меня возникли некоторые проблемы с этим.

Мой заголовок «JS documentation», похоже, действует так, как будто в нем есть position: absolute, но это не так, и, похоже, он прокручивается вместе с остальной частью тела, хотя я не могу понять, почему это происходит. Несмотря на то, что он и ul заключены в панель навигации, кажется, что любые изменения, внесенные в конкретный селектор панели навигации, влияют только на заголовок, и я не могу понять, почему. Любая помощь была бы высоко оценена.

Вот как это должно выглядеть

https://codepen.io/freeCodeCamp/pen/NdrKKL

Codepen HTML для этой части

Code pen Html

 <nav id="navbar">
  <header>JS Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#What_you_should_already_know"
        >What you should already know</a
      >
    </li>
    <li>
      <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    </li>
    <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li>
      <a class="nav-link" href="#Declaring_variables">Declaring variables</a>
    </li>
    <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
    <li><a class="nav-link" href="#Global_variables">Global variables</a></li>
    <li><a class="nav-link" href="#Constants">Constants</a></li>
    <li><a class="nav-link" href="#Data_types">Data types</a></li>
    <li>
      <a class="nav-link" href="#if...else_statement">if...else statement</a>
    </li>
    <li><a class="nav-link" href="#while_statement">while statement</a></li>
    <li>
      <a class="nav-link" href="#Function_declarations"
        >Function declarations</a
      >
    </li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>
  

Codepen Css

     #navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}
  

и это мой фактический код, в котором у меня есть проблемы

Я буду публиковать только часть кода, так как это было бы очень долго, imo здесь

https://codepen.io/RomarioR/pen/zYqpjxZ

Мой HTML

 <nav id="navbar">
        <header >
          <h1 class="first.header">JS Documentation  </h1>   
        </header>
          <ul>
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#what_you_should_already_know"class="nav-link">What you should already know</a></li>
            <li><a href="#javascript_and_java" class="nav-link">Javascript and Java</a></li>
            <li><a href="#hello_world" class="nav-link"> Hello World</a></li>   
            <li><a href="#variables" class="nav-link">Variables</a></li>
              <li><a href="#declaring_variables" class="nav-link">Declaring Variables</a></li>
            <li><a href="#variable_scope" class="nav-link">Variable Scope</a></li>
              <li><a href="#global_variables" class="nav-link">Global Variables</a></li>
              <li><a href="#constants" class="nav-link">Constants</a></li>
            <li><a href="#data_types" class="nav-link">Data Types</a></li>
            <li><a href="#if_else_statement" class="nav-link">if...else statement</a></li>
              <li><a href="#while_statement" class="nav-link">while Statement</a></li>
              <li><a href="#function_declarations" class="nav-link">Function Declarations</a></li>
              <li><a href="#reference" class="nav-link">Reference</a></li>
            </ul>
          </nav>
  

Мой Css

     .first-header{
  margin: 0;  
  font-size:1.8em; 
}

header h1{
   font-size: 1.2em;
  margin-bottom: 0;
  width: 20%;
 
  
} 

#navbar ul {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  color:#707175; 
  overflow: auto;
  position: fixed;
  width: 20%;
  border-right: solid;
  height: 100%;
  top: -20px;
  left: 0px;
}