Bootstrap :Remove navbar brand when on small screen, f.e. mobile

Question

The navbar on my website (see code block) expands in height when on mobile (because it doesn't all fit into 1 line). I noticed that if i delete the brand, it fits. However when on a big screen i would like to keep the brand. How can I make it disappear only for small screens (mobile) and stay for computer screens?

Thank you!

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand custom-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

i tried adding this to my css but this only cuts off half of my brand to make it fit which i think is uglier than just getting rid of the whole thing.

 .custom-brand{
    overflow: hidden;
  }

Answer 1

See Bootstrap 4.0 documentation: Hiding elements

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none.d-md-block.d-xl-none will hide the element for all screen sizes except on medium and large devices.

Answer 2

What you can do is add a class, for example, take desktop as the className and we are using a media query to achieve this. It will now display only on screens that are more than 500px wider.

 <style> @media screen and (max-width: 500px){.desktop{ display: none;important; } } </style> <a class="navbar-brand custom-brand desktop" href="#">Logo</a>