FAQ page navigation

I refrained from mentioning this issue for years. But today, I finally gathered enough courage to launch a discussion and expose this very important and disturbing problem :triumph: :upside_down_face::

When clicking on an item in the FAQ page, the title and part of the text of the article is hidden above the top of the page.

chrome_MFFamKMATe

I do not know how to fix it. Not enough people are capable or willing to help, and I do not want to waste tens of hours on that stupid thing.

Stupid thing… ok.
I did mention that this was the start of a discussion on the subject.
It was not an arrow aimed directly at you personally.
There are members that know a lot about HTML, CSS, Bootstrap and all these kind of things. And they frequently help on many issues.
I’m confident they can and probably will suggest ways to fix this stupid problem.

The problem is that the navigation bar at the top of the screen (where the Shotcut logo resides) has the CSS attribute “position fixed”, which means that no matter where you scroll to on the page it always appears at the very top.

When you click on an FAQ, the page jumps to that FAQ header (<h2>) and this header moves to the top of the screen, but unfortunately it is hidden underneath the navigation bar!

I will have a look to see if I can come up with a solution.

@shotcut needs to put the following lines into the website file called “assets/css/main.css”.

h2 {
	padding-top:  60px !important;
	 margin-top: -40px !important;
}
3 Likes

Thank you so much! I found that I needed a slightly larger value for padding-top on Safari on my MacBook. It seems this height depends on the various factors of its contents and font rendering. However, a slightly larger offset on another system will still look OK. This is applied now.

Glad to have been assistance. To fix it properly requires javascript, since you really need to know what the height of the navigation DIV is. However, this simple CSS directive will handle most cases.