I'm creating a portfolio website for myself and one of the things that i added was a sticky navbar, but the problem is that when I added it, it created a "space" behind it, and with that "space" being created it does not allow me to use the carousel that I have as a background. The navbar works as it should but if i go down the page, the "space" just stays there and I can't find a workaround for it. I've seen some posts about people who had a similar problem as mine, I tried the solutions proposed but none of them seems to work. I'm using Html and Css, with some bootstrap, because im fairly new to coding. I would appreciate it if any of the solutions provided didn't use Javascript The space behind the navbar that im trying to remove (the redish color)
I've trying setting the navbar position to top:0, changing the carousel to Position:absolute, changing the width, clear and float properties of the navbar, but nothing seems to work as I mentioned above.
Index.html:
* {
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: 0;
}
.carouselslide img {
filter: blur(8px);
filter: brightness(0.3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flokki's Portfolio</title>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/Projeto Final/styles.css">
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="..." 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="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>I'm creating a portfolio website for myself and one of the things that i added was a sticky navbar, but the problem is that when I added it, it created a "space" behind it, and with that "space" being created it does not allow me to use the carousel that I have as a background. The navbar works as it should but if i go down the page, the "space" just stays there and I can't find a workaround for it. I've seen some posts about people who had a similar problem as mine, I tried the solutions proposed but none of them seems to work. I'm using Html and Css, with some bootstrap, because im fairly new to coding. I would appreciate it if any of the solutions provided didn't use Javascript The space behind the navbar that im trying to remove (the redish color)
I've trying setting the navbar position to top:0, changing the carousel to Position:absolute, changing the width, clear and float properties of the navbar, but nothing seems to work as I mentioned above.
Index.html:
* {
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: 0;
}
.carouselslide img {
filter: blur(8px);
filter: brightness(0.3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flokki's Portfolio</title>
<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">
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="..." 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="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." 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>
</body>
</html>- can you please circle that space in your image output, or be more clear what is that space, and is your issue that the nav bar is not sticky to top or what? – redoc Commented Jan 19 at 15:56
1 Answer
Reset to default 0First 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:
Codepen
*{
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>