CODEWITHSUNDEEP
javascripthtmlcss
user372204
user372204

Reputation: 79

hide nav bar when going to a page using html/css

I am working on a simple portfolio for my friend. He wants it so that when I go to his portfolio section, the navbar simply should be hidden and it should only show up when I hover over it.

I saw a lot of tutorials on w3schools on how they do it but quite wasn't able to do it. Here is my HTML code for my navigation.

Once again, I want it so that the Navigation page should be hidden when I click "portfolio" and that it should only show when I hover over it.

Here is an example of what I mean. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll

HTML CODE:

    <header id="header" class="header-tops">
    <div class="container">

      <h1><a href="index.html">Parth Prajapati</a></h1>      
      <!-- <a href="index.html" class="mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a> -->
      <h2>I'm a 4th year <span>Architectural Student</span> based in Toronto</h2>

      <nav class="nav-menu d-none d-lg-block">
        <ul>
          <li class="active"><a href="#header">Home</a></li>
          <li><a href="#about">About</a></li>          
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav><!-- .nav-menu -->

      <div class="social-links">        
        <!-- <a href="#" class="instagram"><i class="icofont-instagram"></i></a>         -->
        <a href="https://www.linkedin.com/in/parth-prajapati-93b34b143/" target="_blank" class="linkedin"><i class="icofont-linkedin"></i></a>
      </div>
    </div>
  </header><!-- End Header -->

JS Code:

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementsByClassName('container').style.top = "0";
  } else {
    document.getElementsByClassName('container').style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Upvotes: 0

Views: 1476

Answers (1)

Sudeep Kuchara
Sudeep Kuchara

Reputation: 67

what css properties did you add? There are few things you can do to improve your code. 1)see if your navbar position needs fixed or sticky property and 2)use id to your navbar, classes have lower specificity than id. the example you provided has this css.

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

your js code just applying the style to the whole container class, is that what you really want?

Upvotes: 1

Related Questions