Here’s the navbar code:
<header>
<nav class="sticky-top navbar navbar-expand-md bg-body-light border-bottom ">
<div class="container-fluid">
<a class="navbar-brand" href="/listings"
><b><i class="fa-brands fa-airbnb"></i> WanderLust</b></a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="/listings">Explore</a>
<a class="nav-link" href="/listings/new">Airbnb Your Home</a>
</div>
<div class="navbar-nav ms-auto">
<form class="d-flex" role="search">
<input
class="form-control me-2"
id="search-in"
placeholder="Search destinations"
aria-label="Search"
/>
<button class="btn" id="search-btn" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>Search
</button>
</form>
</div>
<div class="navbar-nav ms-auto">
<% if (!currUser){ %>
<a class="nav-link" href="/signup"><b>Sign Up</b></a>
<a class="nav-link" href="/login"><b>Log In</b></a>
<% } %> <% if (currUser){ %>
<a class="nav-link" href="/logout"><b>Log Out</b></a>
<% } %>
</div>
</div>
</div>
</nav>
</header>
Here’s the boilerplate code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WanderLust</title>
<link rel="stylesheet" href="/css/style.css" />
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="/css/rating.css" />
</head>
<body>
<%- include('../includes/navbar.ejs') %> <%-include('../includes/flash.ejs')
%>
<div class="container"><%- body %></div>
<%- include('../includes/footer.ejs') %>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<script src="/js/script.js"></script>
</body>
</html>
When I’m adding the css to boilerplate code the navbar starts to overflow.
Here’s the css code:
* {
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
}
/* Navbar */
.navbar {
height: 5rem;
background-color: white;
}
.fa-airbnb {
color: #ff5a5f;
}
.nav-link {
color: black !important;
}
/* Seach Bar */
#search-btn {
background-color: #ff5a5f;
color: white;
border-radius: 25px;
padding: 0 1rem 0 1rem;
}
#search-btn i {
display: inline;
margin-right: 0.5rem;
}
#search-in {
border-radius: 25px;
padding: 0.5rem 3rem 0.5rem 3rem;
}
When I remove the navbar height the overflowing is fixed but I want it to be 5rems.
The navbar is content comes out of the 5rem nav bar and merges with the main body content and what ever I do it doesn’t help.
I have been trying to fix it for 3 days but nothing’s working, this is my first full-stack project and I need serious help here.
I tried removing the height and overflow control but nothing worked.