[SOLVED] How remove scrolling on sticky navbar with hero section?

How remove scrolling on sticky navbar with hero section?

I've created an sticky navbar:

    <div class="navbar bg-base-100 sticky top-0">

My content section under navbar code is:

    <div
      class="hero min-h-screen"
      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
      ...
    </div>

My nav is sticked correctly, but my hero section (since is min-h-screen) is showing an scroll. I mean, I need that my hero section height fits on (h-screen - navbar height).

I mean, I'd like to remobe scroll effect.

Any ideas?

Solution

Here’s how you can update your code:

<div class="navbar bg-base-100 sticky top-0 h-16">
  <!-- Navbar Content -->
</div>

<div
  class="hero"
  style="
    background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);
    height: calc(100vh - 4rem); /* Subtract navbar height */
  "
>
  <!-- Hero Section Content -->
</div>