First you should add !important
to your slider styles and then instead of top: 0;
you should write top: -59px !important;
(59px
is the size of the navbar
).
Here is the corrected functional code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #8b5656;
}
.navbar {
--margin: 40px;
background-color: rgba(255, 255, 255, 0.5);
position: sticky;
top: 0;
width: calc(100vw - 2 * var(--margin));
z-index: 1000;
border-radius: 80px;
margin-left: var(--margin);
margin-right: var(--margin);
padding: 12px 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.carouselslide{
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
top: -59px !important;
}
.carouselslide img {
filter: blur(8px);
filter:brightness(0.3);
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/Projeto Final/styles.css">
<!-- Nav bar-->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipground.com%2Fimages%2Fstackoverflow-logo-9.png&f=1&nofb=1&ipt=0765153ba1b0a57a6befd023995864bfb1337b7daee2a4d8360747a2051096cc&ipo=images" alt="Logo" width="30" height="30" class="d-inline-block align-text-top img-fluid">
FlokkiFur </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list-nested"></i>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link" href="#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cartoes">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT ME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-twitter"></i></a> </li>
<li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-instagram"></i></a> </li>
<li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-tiktok"></i></a> </li>
</ul>
</nav>
<!-- Bg carossel-->
<div id="fotosCarousel" class="carouselslide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpreview.redd.it%2Fzfohxnf8t3pa1.jpg%3Fwidth%3D1024%26format%3Dpjpg%26auto%3Dwebp%26v%3Denabled%26s%3D0f660e0a56476991ee3b97f2885d8c010fec5b97&f=1&nofb=1&ipt=abc443565a4307bf540effd4e35273c0e8a9c3242503f6956ce59029b3e53501&ipo=images" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screent-With-background-Image-1536x1355.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://wonderfulengineering.com/wp-content/uploads/2014/10/image-wallpaper-15.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>