0

I have set up some website using GitHub Pages and used the Leap Day theme. Here's the repository containing the theme's original source code and this is how the template looks in practice.

Since I wanted to customize my website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file. Also in that file, I renamed the name of the original navigation bar that was present in the template already, and that is shown to the left of the website, to nav2. The custom (top-)navigation bar is called navi.

Well, after all, most of the website is running smoothly and does what it's supposed to do (presenting some project). However, one problem has remained after the introduction of the additional top-navigation bar, namely that a click onto the name of a certain section or subsection of the currently shown website doesn't lead the user immediately to the start of the respective section any longer, but that what the user is going to see at the start of the actual website's content is somewhere below start of the requested section. As I understand it, the start of some section, e.g. Introduction, is moved to a certain height y on the website when the user clicks onto the Introduction-section's name in the left navigation bar. However, now that the additional navigation bar at the top has been added, such that all further contents have moved downwards, the position y, where the start of the section is shown, is hidden by some banner at the top of the page.

Therefore, I was wondering if anyone knows which of the many variables in the aforementioned css file to change in order to move the point of onset of a section, y, further down on the website. I have tried changing a lot of parameters already, but I am unable to see which one controls the point I termed y.

To make my problem a bit clearer, please consider the following two images:

This is what is supposed to happen:

enter image description here

This is what actually happens:

enter image description here

Thank you very much in advance!

Daniel B.
  • 659
  • 1
  • 9
  • 17

1 Answers1

1

You could try some of the solutions listed in this StackOverflow question: Fixed page header overlaps in-page anchors.

The most common one appears to be adding padding-top to the a element equal to the height of the navigation bar.

Jacob Lockard
  • 1,195
  • 9
  • 24
  • Thanks a lot! That post on the referenced site fixed the problem: https://stackoverflow.com/a/56467997/11478452 – Daniel B. Jun 24 '20 at 15:47