Is There A Way To Make Navbar Logo Responsive?

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 cl

Solution 1:

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:

<imgsrc="small.jpg"srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w"alt="my company">

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

Solution 2:

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;
}

@mediaonly 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;
  }
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" /><navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container relative"><divclass="row"><aclass="navbar-brand"href="#"><imgclass="img-fluid"src="http://www.studiopirrera.com/Images/ui.png"alt=" "></a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavDropdown"><ulclass="navbar-nav navbar-right"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownMenuLink"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
              Dropdown link
            </a><divclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></li></ul></div></div></div></nav>

Solution 3:

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-brandimg {
max-width: 11vw; /* find suitable value for you */display: block;
width: 100%;

}