Good afternoon! I have spent several hours to no avail trying to remove some white space in between our header navigation and content immediately below it. I have tried utilizing AI tools to examine our website and help but it did not resolve the issue. I am adding custom CSS lines in my theme.
I have highlighted the containers in RED to show you. I even tried to locate in chrome through inspect but that failed to help as well.
Here is the site in question:
https://public.fbchuntsville.org/page/211
Any insight would be greatly appreciated!
Here is my custom CSS:
* {
outline: 1px solid red;
}
/* Navbar Styling */
.navbar {
position: fixed; /* Fix navbar to the top */
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* Ensure it stays above other content */
min-height: 100px;
padding: 20px 0;
margin-bottom: 0; /* Remove space below navbar */
}
/* Offset main content to account for the fixed navbar height */
main {
padding-top: 120px; /* Adjust this value if the navbar height changes */
}
/* Logo Adjustments */
.navbar-brand img {
max-height: 80px;
height: auto;
width: auto;
}
/* Remove Breadcrumb and Page Title */
.pagetitle, .breadcrumb {
display: none;
}
/* Remove Padding and Margin from Main Content */
.container main {
padding-top: 0;
margin-top: 0;
}
/* Full-Width Video Container Adjustment */
.video-container {
position: relative;
width: 100%; /* Use 100% width instead of vw for better layout handling */
padding-top: 56.25%; /* Aspect ratio for 16:9 */
overflow: hidden;
}
/* YouTube Video Styling */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Text Overlay */
.video-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3em;
font-weight: bold;
text-align: center;
z-index: 1;
}
/* Navbar Styling */
.navbar {
min-height: 100px; /* Adjust overall height */
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
background-color: #034332;
}
/* Center and adjust the logo */
.navbar-brand {
display: flex;
align-items: center;
padding: 0;
}
.navbar-brand img {
max-height: 80px;
height: auto;
width: auto;
}
/* Padding to account for fixed navbar height */
main.container {
padding-top: 120px; /* Adjust this to match the navbar height */
}