1

I am using bootstrap .

My nav bar is like this

<nav class="navbar fixed-top">
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center">
    <a class="navbar-brand" href="/"><img src="mylogo.png" alt="TopLogo"></a>
  </div>
  <ul class="nav navbar-nav-right">
    <li class="nav-link"><a href="{% url 'index' %}">Top</a></li>
    <li class="nav-link"><a href="{% url 'dashboard' %}">Dashboard</a></li>
  
    <li class="nav-link">{{ user.email }}</li>
    <li class="nav-link"><a href="{% url 'logout' %}" type="button" class="btn btn-primary btn-sm">Logout</a></li>
  </ul>
</nav>

I want to change the logo in navbar-brand depending on screen-size.

mylogo.png -> mylogosmall.png.

Is it possible?

whitebear
  • 11,200
  • 24
  • 114
  • 237

1 Answers1

1

Yes, it's possible by adding two images and classes that control the visibility of elements. Depending on your version of Bootstrap you can have for 3.x for example:

<img src="mylogo.png" alt="TopLogo" class="hidden-xs">
<img src="mylogosmall.png" alt="TopLogo" class="visible-xs">

For Bootstrap 5.x check Hiding elements

https://getbootstrap.com/docs/5.0/utilities/display/

<img src="mylogo.png" alt="TopLogo" class="d-block d-sm-none">
<img src="mylogosmall.png" alt="TopLogo" class="d-none d-sm-block">

Visible only on xs: .d-block .d-sm-none Hidden only on xs: .d-none .d-sm-block

Valeriu Ciuca
  • 2,084
  • 11
  • 14