I want to build a navbar that's changing his size when scrolling down. The problem is that I don't know how to make my logo image to be responsive. I mean when the header is on the top to be full width and height, and when I make my nav smaller to be scaling down.

Down here I have just a simple code from code pen to show you what I'm trying to get

nav {
  background: #555;
  height: 80px;

.nav-content {
  display: flex;

.logo {
  height: auto;
  width: 100%;

ul {
  display: flex;
  list-style: none;

ul li {
  padding: 1rem 4rem;
  <div class="nav-content">
      <img class="logo" src="http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg" alt="">

2 Answers

krsna On Best Solutions

Use this styling for the li tag and will give you responsive header bar and I hope this is what you are looking for

ul li {
  padding: 1vw 4vw;
Community On

Just add padding to the image every time you want to be responsive