如何在滚动导航栏上消失时调整徽标图像的大小

Question

I did not use bootstrap because I couldn't get it to function.

I've used HTML, CSS, and Javascript. I want to have the logo image be the same size as the nav bar and disappear on scroll. Also, if anyone has suggestions on how to shift the home/ contact/ etc to the right, away from the logo image, that would be great.

Here's the code:

 /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }

 #navbar { background-color: #333; /* Black background color */ position: fixed; /* Make it stick/fixed */ top: 0; /* Stay on top */ width: 100%; /* Full width */ transition: top 0.3s; /* Transition effect when sliding down (and up) */ } /* Style the navbar links */ #navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; } #navbar a:hover { background-color: #ddd; color: black; }.logo-image img{ width: 46px; height: 46px; border-radius: 50%; overflow: hidden; margin-top: -6px; }

 <div id="navbar"> <a class="navbar-brand" href="images/Besosnbuds.jpg"> <div class="logo-image"> <img src="images/Besosnbuds.jpg" class="img-fluid"> </div> <a href="index.html">Home </a> <a href="about.html">About</a> <a href="contact.html">Contact</a> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <a class="social_media" href="https://www.facebook.com/natalie.april.73"><i class="fa fa- fa-facebook-square" aria-hidden="true"></i></a> <a class="social_media" href="https://www.instagram.com/besosnbuds/"><i class="fa fa-instagram" aria-hidden="true"></i> </nav> </div>

Answer 1

To shift the Home, Contact, and About to the right away from the logo image, you should wrap the Home, Contact, and About anchor tags in a, and the same with the logo. then wrap those two divs in a containing <div class='container'> . Target container and add

.container {
  display:flex;
  justify-content:space-between;
  align-content: space-between;
  width: 100%;
}

That should push the logo to the far left and everything else to the right.

As for getting the logo to disappear when you scroll, try adding

document.getElementById("logo-image").style.opacity = "0";

or

document.getElementById("logo-image").style.display = "none";

in the else statement.