Solution 1 :

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?

Problem :

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.


    <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">
          <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>
      </nav><!-- .nav-menu -->

      <div class="social-links">        
        <!-- <a href="#" class="instagram"><i class="icofont-instagram"></i></a>         -->
        <a href="" target="_blank" class="linkedin"><i class="icofont-linkedin"></i></a>
  </header><!-- End Header -->

JS Code:

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


Comment posted by TheEagle

what is your problem ?

Comment posted by tacoshy

what have you tried so far? where are you actually stuck. By your description, there is no need to even use JS. Can be done with pure CSS.

Comment posted by TheEagle

@tacoshy then show us how !

Comment posted by tacoshy

@frederic simply hide the navbar on all pages with exeption of the portfolio page

Comment posted by user372204

Incase yall didnt read, I tried the above code with the examples I saw online and it doesn’t work hence why I am here asking what I should do. I want it so when I am on the portfolio page, the Navbar should be hidden and it only shows when I hover over or scroll