I am facing an issue with a fixed navbar at the top of my page. Below the navbar, I have the page content which includes a Bootstrap 4 image carousel. The problem arises on mobile devices where I need to add top-padding to the page-container (below the navbar) to prevent the carousel from being obscured by the expanded navbar. However, this padding remains even when the navbar is collapsed, resulting in excessive white space.
Essentially, I want the page container (starting with the carousel) to always align right below the navbar, regardless of whether it is collapsed or not.
Here is a snippet for reference:
body {
width:auto;
letter-spacing: 1px;
font-family:'Gudea', sans-serif;
font-size:16px;
background-color:#f7f7f7 !important;
}
.page-container {
width: inherit;
max-width: 100%;
margin: auto;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
box-shadow:0 0 15px rgba(0,0,0,0.3);
}
.navbar {
background-color:#f7f7f7 !important;
border-bottom:1px solid #E9E9E9;
padding-bottom:30px;
}
.navbar.toggler.collapsed .page-container{
background-color: blue
}
/* Other CSS rules... */
}<!doctype html>
<html lang="en">
<head>
<!--Essential items -->
<meta charset="utf-8">
<!-- Mobile specifications-->
<meta content="width=device-width, intial-scale=1, maximum-scale=1" name=viewport>
<!-- CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href = "css/style.css" rel="stylesheet" type="text/css">
<!-- Fonts-->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
My attempted solution:
CSS:
/* On mobile, when navbar collapsed, set page container padding to 0vh */
@media (max-width: 769px) {
.navbar-collapse .page-container{
padding-top:0vh
}
}
I also tried a JavaScript solution, attempting to add an event listener for when the navbar is collapsed:
if ($('#toggle').attr('aria-expanded') == "true") {
console.log("true")
}Neither solution seems to be working as expected. I'm considering a JavaScript approach to resize the page container when the navbar collapses. However, is there a simpler CSS solution that I might be missing?