Question

Photo of Rob Hipp

0

Custom CSS - Removing white space

2

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 */

}



  • Photo of Rob Hipp

    0

    Thank you, Andrea. I changed this just for the main page and header content under advanced settings for the page. It works great! 

    <style>

        /* Adjust Padding to Account for Navbar Height */

        main.container {

            padding-top: 95px; /* Adjust this value based on the height of your navbar */

        }


        /* Prevent horizontal scrolling */

        body, html {

            overflow-x: hidden;

        }

    </style>

  • Photo of Andrea Monnerie

    1

    It appears that the whitespace is due to top padding on the "<main class="container">" element. Adding the Bootstrap class "pt-0" to that element removes the white space. After a deeper inspection, the 120px top padding for the "main" element is coming from the "Spark" theme CSS.

    Hope this helps!