Recently, I came across some website templates where clicking on a link in the navbar smoothly scrolls to the corresponding section with perfect alignment. The content at the top of the page aligns perfectly with the top of each division.
Upon attempting to implement this feature myself, I encountered an issue where some content was hidden behind the navbar. Does anyone have a solution for fixing this problem?
In an attempt to "fix" this issue, I added padding to the section blocks. However, I would prefer to achieve the same level of alignment as seen in the template I found online.
You can view the template here.
I'm sharing portions of the HTML and JavaScript code from the template below (I cannot include the CSS due to character limitations). Can someone help me identify which part of the code is causing the content to be hidden behind the navbar?
Here is a snippet of the HTML:
**<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
...
</section>**
And here is a portion of the JavaScript code provided by the template:
/*!
* Start Bootstrap - Freelancer v7.0.3 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
//
...
});
The template displays divisions clearly with distinct background colors for each section:
Template Screenshot:
When selecting a portfolio item from the navbar, it smoothly scrolls down to the selected section:
Portfolio Section Clicked:
However, when implementing this functionality in my own HTML file, the top of the section gets hidden behind the navbar. Here's a screenshot illustrating the issue:
Section Hidden Behind Navbar:
Unlike the template, after clicking on a navbar link, the title of the section remains obscured by the navbar. Here's a comparison shot:
Comparison to Template:
To address this, I applied padding to the sections, but the layout still doesn't match the seamless design of the template.