1

I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.

Here's my HTML,

<nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Food, LLC</a>
    </div>
    <div>
      <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="collapsable-nav" class="collapse navbar-collapse">
      <ul id="nav-list" class="nav navbar-nav navbar-right">
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Beef</a></li>
        <li><a href="#">Sushi</a></li>
      </ul>
    </div>
  </div>
</nav>
hael
  • 49
  • 1
  • 7
  • Use media query. https://www.w3schools.com/css/css_rwd_mediaqueries.asp – vikram Sep 02 '20 at 11:17
  • Does this answer your question? [Displaying div only on mobile devices](https://stackoverflow.com/questions/23300415/displaying-div-only-on-mobile-devices) – Dokksen Sep 02 '20 at 11:18
  • https://getbootstrap.com/docs/4.0/utilities/display#hiding-elements – Pete Sep 02 '20 at 11:19

1 Answers1

0
    <nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Food, LLC</a>
    </div>
    <div>
      <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="collapsable-nav" class="collapse navbar-collapse visible-xs">
      <ul id="nav-list" class="nav navbar-nav navbar-right ">
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Beef</a></li>
        <li><a href="#">Sushi</a></li>
      </ul>
    </div>
  </div>
</nav>
Prinju Koshy Vaidyan
  • 485
  • 3
  • 9