Is there a way to make navbar logo responsive?

Question

So, here is the website I've built using bootstrap 4. I have a big issue with the logo, as it keeps the same size on all devices.

I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my css:

.navbar .navbar-brand {
padding: 5px 200px;
}


.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}

.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}

This is my html:


    
     
    
    
        
        
            
                Home
            
            
                Chi Sono
            
            
                Servizi
            
            
                Contattaci
            
            
                 Area Clienti

That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!

user_4279496 · Answer

I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.

This will let allow you to position your nav items to the right using a css class I added called .navbar-right.

But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)

Hope this helps.

.navbar-right {
  position: absolute;
  right: 0;
}

.relative {
  position: relative;
}

@media only screen and (max-width:768px) {
  .navbar-brand {
    max-width: 100px;
  }
  /* below is for the demo but might help you position 
  the hamburger menu on mobile */
  .navbar-toggler {
    right: 0;
    position: absolute;
    margin: 10px;
  }
}



  
    
      
        
      
      

      
        
          
            Home (current)
          
          
            Features
          
          
            Pricing
          
          
            
              Dropdown link
            
            
              Action
              Another action
              Something else here

user_1443949 · Answer

The best option would be to create diffenrent images files for different view port sizes. With the srcset attribute, you can select which image should show in which case.

Here an example:

You give the name/location of the image file, followed by a space and the view port size, when the image should show. It describes until which width (that's why it's w) the image should show. The example above translates to:

the small.jpg is shown until a view port width of 320px
the medium.jpg is shown until a view port width of 600px
the large.jpg is shown until a view port width of 900px

More detailed information can be found here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

The positioning can be archieved by the information form brooksrelyt's answer

user_5385052 · Answer

I solved this problem using an vw units width of image. This allows the element's aspect ratio to be preserved, based on the viewport width

.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;

}

Is there a way to make navbar logo responsive?

3 Answers