My navbar displays an image below it, but the top part of the image is cut off. The desired outcome is for the image to start at the bottom of the navbar to prevent any cropping issues. This becomes more noticeable as the screen size decreases. I attempted to add a margin-top property to the image, however, the value is not consistent across different screen sizes.FIDDLE
: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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb0aeb2">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928d928f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="{% static 'js/lightbox.js' %}"></script>
</body>