'Image hiding under nav bar

I have a navbar with an image below it. The issue is the top of the image is being cut off. I want the image to start at the bottom of the navbar. You can see part of the cats head is cut off. It gets worse the smaller the screen size. I was adding a margin top to the image but its not constant as it varies with screen sizeFIDDLE

:root {
    --primary-color: #FF0000;
    --main-color: #FF0000;
    --dark-main: #FF0000;
}

body {
    
    min-height: 400px;
    margin-bottom: 300px;
    clear: both;
}
html {
    height: 100%;
    
}

.hero-image {
    background-image: url("https://www.purina.co.uk/sites/default/files/2020-12/8-Large-Domestic-Cat-BreedsHERO.jpg");
    height: 50%;
    padding: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 2em;
    
}


.body-no-margin {
    height: 100%;
    background: #F6F6F6;
    color: #333333;
    
}

ul {
    margin: 0;
}

.bg-steel {
    background-color: var(--main-color);
}

.navigation-items{
    display: block;
    padding: .5rem 0.3rem;
    color: #eeeeee;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<body class="body-no-margin">
  <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="">
          <div class=nav-bar-logo></div>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mynavbar">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="navigation-items" href="">Home</a>
            </li>
            <li class="nav-item">
              <a class="navigation-items" href="">Browse</a>
            </li>
          </ul>
          <div class="d-flex">
            <ul class="navbar-nav me-auto">

              <li class="nav-item">
                <a class="navigation-items" href="}">Profile</a>
              </li>
              <li class="nav-item">
                <a class="navigation-items" href="">New</a>
              </li>
              <li class="nav-item">
                <a class="navigation-items" href="">Logout</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div class="hero-image">
  </div>



  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="{% static 'js/lightbox.js' %}"></script>

</body>
htmlcss


Solution 1:[1]

I added padding-top: 25px; to my main body

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wazy

Related Questions