Resolved issue with header covering page content

https://i.sstatic.net/1PhFl.jpg

The content underneath my fixed header is getting covered slightly by the header, rather than aligning perfectly with it. Ideally, the top of the carousel should be right below the bottom of the header to occupy the entire screen except for the header area.

The HTML structure includes 3 div elements in the body, a sticky header, and a stationary footer.

body{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.header{
  position: sticky;
  top: 0;
  background-color: #0d0d0d;
  height: 65px
}

section {
  position: relative;
  height: calc(100vh - 65px);
  scroll-snap-align: center;
}

.splash-carousel{
  height: calc(100vh - 65px);
  width: 100%;
}

Answer №1

When you use the Fixed-top class in Bootstrap, it removes the navigation bar from the normal flow of the content and the section takes its place. To ensure the section is fully visible, you need to either set the margin-top of the section or the padding-top of the body to 56px.

The original height of Bootstrap-4 nav is 56px, but it's important to calculate this value yourself as well.

 body {
  padding-top: 56px;
}

body {
  padding-top: 56px;
}


.full-screen {
  height: calc(100vh - 56px) !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="container-fluid ">
    <div class="row">
      <div class="col bg-primary full-screen">
        
      </div>
    </div>
  </main>
</body>

https://codepen.io/anon/pen/ZdMjMX

If the code works in the Codepen but not for you, the issue could be that the header's height is more than 65px or the image is too big. Try removing the image to see if that is causing the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a download link with the combination of canvg and amcharts

I am attempting to include a download link on a page that utilizes AmCharts and CanVG. The visualization of the graph and image is functioning properly. Now, I am in need of a download link to offer users the ability to download the displayed graph image. ...

I am having trouble with my 'SELECT DISTINCT' command, it's not functioning correctly

When I attempted to populate my drop down menu with values from the database using 'Select DISTINCT', it only retrieved some of the data instead of all of it. Below is my PHP code: <? $sqlretrive = mysql_query("Select DISTINCT type from ...

"How to Develop an Eraser Tool Using EaselJs - Exploring Further Possibilities

Currently, I am working on creating a Bitmap eraser on easelJS. I feel like I've made significant progress towards achieving this goal, but I'm still a bit unsure of the next steps... Here is a demo of my progress so far: http://jsfiddle.net/bor ...

Using jQuery to load form elements in web development

Can jQuery's .load() function load <form> elements? I noticed that it appears to be removing them. Here is an example of my code: $('<div></div>').load($link.attr('href') + ' #divDlgContent', function( ...

python code to locate element using selenium

Currently, I am utilizing selenium in conjunction with Python to automate tasks. I am facing an issue where I have a checkbox element that I need to click on, but the only information I have about it is the text it contains. The text is located within a &l ...

Retrieve information from MongoDB and display it in an HTML table

I have some data that follows this structure: { "jobname" : "2018_09_27_test123_0", "totalcalls" : 1836.0, "success" : 3.0, "fail" : 1833.0, "failureReasons" : [ { "reason" : "Unavailable", "count" : 53 ...

Understanding the technique of extracting text from descendant nodes using Xpath

I am facing a scenario similar to this: <div id="m0"> ... <tr> <td></td> <td></td> <td>Radio</td> </tr> </div> <div id="m1"> ... <tr> <td></td> <td>< ...

Transforming the color of the navbar upon a scrolling action is implemented through Angular's [ngClass

New to Angular and looking to implement a feature where the navbar changes from transparent to dark upon scrolling. However, my current implementation keeps the navbar transparent even after scrolling. Any tips on achieving this functionality? Here is the ...

Experiencing difficulties connecting JavaScript with HTML

I'm encountering difficulty with implementing my JavaScript on my website. While it functions properly in this JS Fiddle, I am experiencing issues when trying to use it on my actual site. Below is how I have linked the JS on my site: <head> < ...

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

Is it possible to place a pseudo-element beneath the background of its parent element?

I'm working on a website with a fixed header containing a main menu and a second level menu. I want the second level menu to slide in underneath the background of its parent element. Can this be done? Here's an example: `https://codepen.io/anon/ ...

The width of mat-table columns remains static even with the presence of an Input field

I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the tab ...

Creating adaptable HTML images by specifying width and height attributes within the image tag

My current website setup involves loading a full image and automatically adjusting its size to fit the screen by setting the image width to 100% in CSS. While this method works smoothly, it may not be following standards as I am not specifying width and he ...

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Is there a more efficient way to write the following code that utilizes the sx prop's access to spacing units? <MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} /> Could it be written like this instead? <MUIComponent sx={{ b ...

Discover the quick method of retrieving the checkbox value instantly

Looking for a way to track when a checkbox is checked using Angular This is the current setup: <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="test[item.id]" ng-click="getID()" ng-checked="checkAll"/> {{ ...

Tips for eliminating the page URL when printing a page using window.print() in JavaScript or Angular 4

Can someone help me with a function that uses window.print() to print the current page, but I need to remove the page URL when printing? I'm looking to exclude the URL from being printed and here is the code snippet where I want to make this adjustme ...

position the input and span elements side by side

Need help aligning an input and a span element next to each other. The span is currently positioned below the input, but I want it to be on the right side of the input. I am trying to create a search bar using this input and span tag, so they need to be al ...