Fixed header overlapping anchors

[Robert Falkowitz]

I know this question has been asked several times already, but I never really understand the answers, so please do not give me a link to someplace else. And I don't want to install yet another plugin to handle this.
The problem is that when you click on a link to an anchor on a page, the browser displays that place at the top of the page, but behind the fixed header. As a result, the user needs to scroll up to see what they were looking for.
It appears that this can be resolved with a combination of some custom css and adding a style somewhere, but it is not clear to me precisely what you are supposed to do.
Thanks in advance for any help.

[Victor Font]

Think of a web page in terms of 3 dimensions. You have the horizontal and vertical, as well as a front-to-back depth. When you have a fixed header, it floats above other content beneath it. Think of it as laying out siding on a house. You have one layer overlapping the next one below. The way to fix the overlap is to force the lower layer to display further down the page. You force the lower down by adding some top margin in CSS to the first major structure under the header, usually site-inner. But you'll have to determine the right layer to add the top margin to by using your browser's inspect tool and seeing where it makes sense to add the margin.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Robert Falkowitz]

Thank you for your answer. I don't think I want to move the entire page, wholesale, down farther. All I want is for the browser to display correctly the page when it jumps to an anchor from some link. Otherwise, all displays correctly.

[Author]

Posts