-1
<body>
    <header>       
        <nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="index.html" class="float-start .d-none .d-lg-block .d-xl-none">
                        <div id="logo-img" alt="Logo image"></div>
                    </a>
                    <div class="navbar-brand">
                        <a  href="index.html"><h1>Example 1</h1></a>
                            <p>
                                <img src="R.png" alt="Korsher certification">
                                    <span>Kosher Certifield</span>
                            </p>
                    </div>
            </div>
        </nav>
    </header>   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

i wanted the website can be visible only lg or md devices otherwise the logo will be hidden.

icecube0129
  • 3
  • 1
  • 1
    Please explain where is your problem/error. Start to read documentation about classes on [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/containers/). – Sfili_81 Dec 15 '22 at 07:44
  • hi, just changed container-fluid back to container, and yet my problem is i want to hide the logo when i squeeze in the browser into small device screen. – icecube0129 Dec 15 '22 at 07:55
  • Take a [look](https://getbootstrap.com/docs/4.0/utilities/display/) to display classes and use the correct class. For example d-lg-none hide on screens wider than lg – Sfili_81 Dec 15 '22 at 08:10

1 Answers1

1
  1. You need to add both, Bootstrap CSS and Bootstrap JS.
  2. To hide logo on mobile, add Bootstrap classes d-sm-block d-none.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<body>
  <header>
    <nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="index.html" class="d-sm-block d-none">
            <div id="logo-img" alt="Logo image">Logo</div>
          </a>
          <div class="navbar-brand">
            <a href="index.html">
              <h1>Example 1</h1>
            </a>
            <p>
              <img src="R.png" alt="Korsher certification">
              <span>Kosher Certifield</span>
            </p>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49