3

I have a navbar on bootstrap 4. When i am in the desktop view i display a logo "x", however when i change to mobile view i need to logo "x" change for the logo "y". I tried with next "solution" but it not works.

<a class="navbar-brand hidden-sm-down">
    <img src="./assets/img/genesyst-logo.png">
</a>
<a class="navbar-brand hidden-md-up">
    <img src="./assets/img/genesyst-logo-wh.png">
</a>

Could you help me?

Usama Abdulrehman
  • 1,041
  • 3
  • 11
  • 21
josue1saac
  • 41
  • 4

1 Answers1

5

With Bootstrap 4 .hidden-* classes were removed but you can use display property to achieve the same goal.

A solution using display property:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<a class="navbar-brand">
  <!-- logo for large screen -->
  <img class="d-none d-md-block" src="https://via.placeholder.com/400x90?text=big+logo" />

  <!-- logo for small screen -->
  <img class="d-md-none" src="https://via.placeholder.com/200x90?text=small+logo" />
</a>

Useful links:

Tom
  • 677
  • 7
  • 21