Hi Tom
It’s taken a while getting back as I’ve run this CSS through a fair bit of cross browser testing etc. I have used emulators on windows desktop to simulate Mac. I have also tried to find a way to emulate iOS on android though the only one I can find appears to be experiencing a 403 server error for the last 3 days which isn’t helpful.
:target:before {
content: “”;
display: block;
height: 35px;
/* fixed header height */
margin: -60px 0 0;
/* negative fixed header height */
}
I needed to adjust the height from 60 to 35 in order to remove some unnecessary white space that was produced. Furthermore the margin of -60 was prefect.
I found that the CSS above works 80% of the time. Around 20% of the time it functions as if this CSS is not present so the text becomes hidden behind the floating menu as opposed to starting below it. More often than not it will fail to work on the first load, sometimes the first few times. It’s a bit unreliable to implement like this.
I tested this on Chrome, IE v11, Microsoft Edge, Firefox, Opera and Safari plus a multitude of mobile browsers
What I found was that on Chrome, IE v11, Microsoft Edge, Firefox, Opera it worked 80% of the time. The only difference was that the text position varied by about 1/8th to 3/16th of an inch (or 3-4mm) so the text position on some browsers was just under the floating menu, whereas on other browsers it was a bit lower.
Despite this slight variation in height, the white space between text remains consistent and given the line break between paragraphs are larger than this variation in position, none of the text before this point sneak past the menu so is completely hidden from view and therefore this slight height variation is totally fine. No one would notice it given they will most likely only ever use one browser anyway.
I have however used the more tag option following a paragraph and not mid way through like an excerpt read more does. If I did this with the more tag it creates a formatting issue. When placing a line break in the middle of the paragraph the mother post format is thrown out. It is not something that appears doable like this.
Now as far as Safari goes (which is a bit of a concern given all the Apple Mac users) the windows version only goes up to v5.1.7 and the CSS does not work at all on this browser (maybe windows users need some sort of plugin/extension). I can only assume that those on a Mac will have the latest browser which I know many have access too. (As some point in the future I will call into my clients who use Mac and test it out on theirs and post an update in due course though that will take some time). I feel that it’s probably okay though, given I would be highly surprised if Apple don’t allow Mac users to benefit from CSS. As far as Safari CSS on Mac goes the positioning of text is unknown. It’s possible that a half a line of text or more could be hidden behind the floating menu. According to emulator results it may be okay though.
NB: Could a .JS feature to cover this be something you would consider hard coding into GP (or as a secondary plugin) given the practicality of reading on from where one left off is wickedly cool and because you have implemented the menu plus menu option which somewhat negates how the more tag feature works out of the box. I believe it’s a feature that GP users and their readers would certainly benefit from. It’s highly beneficial to the reader if the text flows on from exactly where they left off. It saves time and it just makes sense to have things work like this if possible.
I hope you consider introducing this as a GP feature tweak. If a setting for activating (and potentially adjusting position) was worked into the customizer within the menu plus section, that would be the ultimate solution, unless it can be automated somehow to know when it’s required to activate without a manual setting for such.
Cheers