title: Anchor tag attribute
body: <p>Below is the code for my website. I am working on it to make the navbar responsive. But in the small screen size, the navbar button acts weirdly, as soon as I click on it it redirects to the top instead of showing the list items. Instead what I want it to do is to expand and show all the other list items of the navbar. But I am unable to do so. Can someone help me with this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function responsiveNavbar() {
       let navItems = document.querySelectorAll(".navbar li");
  
       if (navItems[1].classList == "responsive-navbar") {
            navItems.forEach(function(navItem) {
                 navItem.classList.remove(" responsive-navbar");
            });
       } else {
            navItems.forEach(function(navItem) {
                 navItem.classList.add("responsive-navbar");
            });
       }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
  }
  
  html {
       font-size: 62.5%;
       scroll-behavior: smooth;
  }
  
  body {
       box-sizing: inherit;
       color: #777;
       background-color: #E0E2DB;
       font-family: 'Roboto', sans-serif;
       font-size: 1.8rem;
       font-weight: 400;
       line-height: 1.5;
       scroll-behavior: inherit;
  }
  
  .clearfix {zoom: 1;}
  .clearfix:after {
      content: '.';
      clear: both;
      display: block;
      height: 0;
      visibility: hidden;
  }
  
  /* ------------------------------------- */
  /* THE REUSABLE CONTENT */
  /* ------------------------------------- */
  
  /* Grids */
  
  .row {
       width: 80%;
       margin: 0 auto;
  }
  
  .span-1-of-2 {
       width: 48%;
       float: left;
  }
  
  /* HTML contents */
  
  h1, h2.header-heading, h2, h3, h5 {
       margin: 0;
       text-transform: uppercase;
  }
  
  h1 {
       font-size: 4.5rem;
       color: #E0E2DB;
       letter-spacing: .4rem;
       word-spacing: .5rem;
       font-weight: 300;
  }
  
  h2 {
       font-size: 3.5rem;
       color: #3D348B;
       letter-spacing: .3rem;
  }
  
  h3 {
       font-size: 2.6rem;
       color: #000;
  }
  
  h4 {
       font-size: 2.2rem;
       color: #E0E2DB;
  }
  
  h5 {
       font-size: 2rem;
       margin-bottom: .5rem;
       color: #191716;
  }
  
  /* Links */
  
  a {
       text-decoration: none;
       display: inline-block;
  }
  
  /* Icons */
  .icon-small {
       font-size: 2rem;
       color: #3D348B;
       margin-right: 1rem;
  }
  
  /* Buttons */
  
  .btn {
       border: 1px solid #E6AF2E;
       border-radius: .3rem;
       font-size: 1.6rem;
       padding: 1.2rem 3.5rem;
       text-transform: uppercase;
       color: #E0E2DB;
       background-color: transparent;
       font-weight: bold;
       letter-spacing: .3rem;
       transition: all .3s;
  }
  
  .btn:hover {
       background-color: #E6AF2E;
       color: #191716;
  }
  
  .btn2 {
       background-color: #3D348B;
       color: #E0E2DB;
       border: 1px solid #3D348B;
       border-radius: .3rem;
       font-size: 1.6rem;
       padding: 1.2rem 3.5rem;
       text-transform: uppercase;
       font-weight: bold;
       letter-spacing: .3rem;
       transition: all .3s;
  }
  
  .btn2:hover {
       background-color: #E0E2DB;
       color: #191716;
  }
  
  /* Utility classes */
  
  .u-margin-top-small {
       margin-top: 2.5rem;
  }
  
  .u-margin-top-medium {
       margin-top: 5rem;
  }
  
  .u-margin-top-big {
       margin-top: 7.5rem;
  }
  
  .u-margin-bottom-small {
       margin-bottom: 2rem;
  }
  
  .u-margin-bottom-medium {
       margin-bottom: 4rem;
  }
  
  .u-text-align-center {
       text-align: center;
  }
  
  .u-inline-block {
       display: inline-block;
  }
  
  /* ------------------------------------- */
  /* THE HEADER SECTION */
  /* ------------------------------------- */
  
  header {
       background-color: #3D348B;
       height: 100vh;
  }
  
  .hero-text-box {
       position: absolute;
       top: 45%;
       left: 50%;
       transform: translate(-50%, -50%);
  }
  
  h2.header-heading {
       font-size: 3.5rem;
       margin-top: 2rem;
       color: #E6AF2E;
       font-weight: 400;
  }
  
  h2.slogan {
       color: #E6AF2E;
       font-size: 2.8rem;
       font-weight: 400;
  }
  
  /* ------------------------------------- */
  /* THE NAVBAR */
  /* ------------------------------------- */
  
  .navigation {
       position: relative;
       border-bottom: .5px solid #777;
       transition: all .5s;
  }
  
  .logo-box {
       float: left;
  }
  
  .logo img {
       width: 6rem;
       height: auto;
       margin-left: 2rem;
       border-radius: 50%;
  }
  
  nav {
       padding: .5rem;
  }
  
  .navbar {
       float: right;
       list-style: none;
       margin-right: 10rem;
       margin-top: 1.5rem;
  }
  
  .navbar li {
       display: inline-block;
  }
  
  .navbar li a {
       margin: 0 1rem;
       padding: .2rem .6rem;
       color: black;
       text-transform: uppercase;
       border-bottom: 2px solid transparent;
       transition: all .3s;
  }
  
  .navbar li a:hover {
       border-bottom: 2px solid #E6AF2E;
       transition: all .3s;
  }
  
  .navbar .nav-icon {
       display: none;
       transition: all .3s;
  }
  
  /* The sticky navbar */
  
  .sticky {
       position: fixed;
       background-color: #3D348B;
       top: 0;
       width: 100%;
       box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
  }
  
  .sticky .navbar-lists {
       color: #E0E2DB;
  }
  
  .sticky .logo {
       color: #E0E2DB;
  }
  
  /* Responsive navbar */
  
  .responsive-navbar {
       display: block;
       text-align: right;
  }
  
  /* ------------------------------------- */
  section {
       padding: 8rem;
  }
  /* ------------------------------------- */
  
  /* ------------------------------------- */
  /* THE ABOUT SECTION */
  /* ------------------------------------- */
  
  .about-section {
       padding: 0;
       margin-top: 12rem;
  }
  
  .long-text {
       width: 70%;
       margin: 2.5rem auto 0;
  }
  
  .profile-image {
       height: 35rem;
       width: auto;
  }
  
  .my-info-img {
       text-align: right;
       padding-right: 15rem;
  }
  
  .my-info-list {
       list-style: none;
  }
  
  .my-info-list &gt; li {
       margin-bottom: 1.2rem;
  }
  
  /* ------------------------------------- */
  /* MEDIA QUERIES SECTION */
  /* ------------------------------------- */
  
  @media only screen and (max-width: 720px) {
       html {
            font-size: 50%;
       }
  
       .remove-heading {
            display: none;
       }
  
       .logo img {
            width: 5rem;
            margin-top: 1rem;
       }
  
       /* Responsive navbar */
       .navbar li {
            display: none;
       }
  
       .navbar .nav-icon {
            color: #000;
            display: block;
            font-size: 20px;
       }
  
       .sticky .navbar .nav-icon {
            display: block;
            color: #fff;
            font-size: 20px;
       }
  
       .navbar .nav-icon:hover {
            color: #2f2f2f;
       }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
       &lt;!-- Required meta tags --&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  
       &lt;!-- Favicon link --&gt;
       &lt;link rel="shortcut icon" href="favicon.ico"&gt;
       &lt;!-- Icons link --&gt;
       &lt;script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  
       &lt;!-- Rubik font link --&gt;
       &lt;link rel="preconnect" href="https://fonts.gstatic.com"&gt;
       &lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&amp;display=swap" rel="stylesheet"&gt;
  
       &lt;!-- CSS links --&gt;
       &lt;link rel="stylesheet" href="css/normalize.css"&gt;
       &lt;link rel="stylesheet" href="css/styles.css"&gt;
       &lt;link rel="stylesheet" href="css/queries.css"&gt;
  
       &lt;title&gt;Arun Bohra - Design Business Solutions&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
       &lt;header id="header"&gt;
            &lt;div class="hero-text-box u-text-align-center u-inline-block"&gt;
                 &lt;h1&gt;&lt;span class="remove-heading"&gt;Hello&lt;/span&gt; I'm Arun&lt;/h1&gt;
                 &lt;h2 class="header-heading u-margin-top-small"&gt;I'm a front-end developer&lt;/h2&gt;
                 &lt;h2 class="slogan u-margin-top-small"&gt;Design business solutions&lt;/h2&gt;
                 &lt;a href="#about" class="btn u-margin-top-small u-inline-block"&gt;Who am I&lt;/a&gt;
            &lt;/div&gt;
       &lt;/header&gt;
  
       &lt;div class="navigation"&gt;
            &lt;nav class="clearfix"&gt;
                 &lt;div class="logo-box"&gt;
                      &lt;a href="#header" class="logo"&gt;
                           &lt;img src="img/logo.png" alt="logo"&gt;
                      &lt;/a&gt;
                 &lt;/div&gt;
  
                 &lt;ul class="navbar"&gt;
                      &lt;a href="" class="nav-icon" onclick="responsiveNavbar()"&gt;&lt;i class="fas fa-bars" id="responsive-nav-btn"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;li&gt;&lt;a href="#header" class="navbar-lists"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about" class="navbar-lists"&gt;About me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#skills" class="navbar-lists"&gt;Skills&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#projects" class="navbar-lists"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact" class="navbar-lists"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
  
            &lt;/nav&gt;
       &lt;/div&gt;
  
       &lt;section class="about-section" id="about"&gt;
            &lt;h2 class="u-text-align-center"&gt;Who am I&lt;/h2&gt;
            &lt;p class="long-text u-text-align-center"&gt;I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.&lt;/p&gt;
  
            &lt;div class="row clearfix u-margin-top-big my-info-box"&gt;
                 &lt;div class="span-1-of-2 my-info-img"&gt;
                      &lt;img src="img/profile.png" alt="Profile image" class="profile-image"&gt;
                 &lt;/div&gt;
  
                 &lt;div class="span-1-of-2 my-info-text"&gt;
                      &lt;h3 class="u-margin-bottom-medium"&gt;I design awesome websites&lt;/h3&gt;
  
                      &lt;ul class="my-info-list u-margin-bottom-medium"&gt;
                           &lt;li&gt;&lt;i class="fas fa-check-circle icon-small"&gt;&lt;/i&gt;I can design awesome websites.&lt;/li&gt;
                           &lt;li&gt;&lt;i class="fas fa-check-circle icon-small"&gt;&lt;/i&gt;I can code the designed websites.&lt;/li&gt;
                           &lt;li&gt;&lt;i class="fas fa-check-circle icon-small"&gt;&lt;/i&gt;I deliver the work very fast.&lt;/li&gt;
                           &lt;li&gt;&lt;i class="fas fa-check-circle icon-small"&gt;&lt;/i&gt;I make very precise revisions.&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;a href="#" class="btn2 u-text-align-center"&gt;Download CV&lt;/a&gt;
                 &lt;/div&gt;
  
            &lt;/div&gt;
  
       &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>