CODEWITHSUNDEEP
bootstrap-4navbar
josue1saac
josue1saac

Reputation: 41

Change logo on mobile view - Bootstrap 4

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?

Upvotes: 3

Views: 1267

Answers (1)

Tom
Tom

Reputation: 765

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:

Upvotes: 6

Related Questions