I am trying to make a responsive nav bar

Lets take this one step at a time, first lets look at the HTML. The center tag is no longer supported in HTML5 so I removed it. Second you had an extra quotation mark in your last anchor which I removed. In order to get all the links to show at once you should wrap them in a container. In this case a list makes the most sense. I have created a nav-list for you and wrapped all your anchor tags in an li tag.

As far as your CSS I noticed you were using .anchor:active which is a Pseudo class. This is not the same as having a class of anchor AND a class of active. If you want to select a class of anchor that also has a class of active you would use .anchor.active. In this case the active class is going on the nav-list so I style it using .nav-list.active

Now for the Javascript. Instead of using it to loop over all the anchor tags and setting them to active individually you can now just toggle the active class on your nav-list. This will make all the links appear at the same time.

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav-list {
  display:none;
}

.nav-list.active {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #747d8c;
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .nav a:active {
    display: block;
  }
}

<nav class="nav">
  <button class="dot_a">
    <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
    <span class="dot" style="background-color: #ff4757;"></span>
    <span class="dot" style="background-color: #ffa502"></span>
    <span class="dot" style="background-color: #2ed573;"></span>
</button>
  <ul class="nav-list">
    <li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a></li>
    <li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a></li>
    <li><a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a></li>
    <li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a></li>
    <li><a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> </li>
  </ul>
</nav>

I am trying to make a responsive nav bar

Related

Recent Posts