0

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;
  }
cactus
  • 69
  • 1
  • 1
  • 8
  • https://stackoverflow.com/questions/45666656/bootstrap-4-responsive-utilities-visible-hidden-xs-sm-lg-not-working – epascarello Jan 06 '21 at 15:22

2 Answers2

2

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.

Coxxs
  • 460
  • 4
  • 9
0

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>
MD M Nauman
  • 421
  • 4
  • 10