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:

<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
    <!-- Brand/logo -->
    <a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
    <button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbarLg">
        <!-- Links -->
        <ul class="navbar-nav float-right text-right pr-3">
            <li class="nav-item">
                <a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
            </li>
        </ul>
    </div>
</nav>

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!

That much padding is always indicative of another issue. Why is it there? — Paulie_D, Jun 25 '19 at 14:31
Because if I don't add it, the logo doesn't have any spacing. I also don't want it to be centered on the navbar, neither on the left side. I want to be in-between these 2 on large screens, and once the view becomes smaller, the spacing between it and the left side to become smaller, as the space from the li elements and the right side. — Sara DN, Jun 25 '19 at 14:37
you can also control the width of the image using the bootstrap grid — brooksrelyt, Jun 25 '19 at 14:50
See [Media Queries for Std Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and [more Media Queries](https://css-tricks.com/css-media-queries/) and [CSS Grid instead of Media Queries](https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/) and [Common Media Query break points](https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points) *You can probably find a trick in one of those articles that will let you solve this problem.* — cssyphus, Jun 25 '19 at 15:10
@cssyphus Thank youuuuu!!! With all your documentations, I'm happy learning by myself now — Sara DN, Jun 26 '19 at 13:13

score 3 · Answer 1 · answered Dec 10 '20 at 13:56

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

}

answered Dec 10 '20 at 13:56

Alexius The Coder

103
1
7

brooksrelyt · Accepted Answer · 2019-06-26T12:46:32.930

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container relative">
    <div class="row">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav navbar-right">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Just another question: how can move that logo a bit more on the right and the li elements a bit more on the left? The problem in my code also comes from that padding: 200px. If I use the same trick I did to move these elements in your code here, I still end up with the same problem... — Sara DN, Jun 26 '19 at 11:32
@SaraDN I edited my answer and added a little bit of an explanation — brooksrelyt, Jun 26 '19 at 12:41
Thank you so much! You helped me a lot!! Altough, I may say that I have solved my issue seconds ago changing my html, removing the css, and making my logo with some 50px smaller:

. It works now and has all the spacing I've wanted. What do you think? — Sara DN, Jun 26 '19 at 13:11

score 2 · Answer 3 · answered Jun 26 '19 at 12:25

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:

<img src="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

Is there a way to make navbar logo responsive?

3 Answers3

Linked