Header in standard post using masonry

[Tom]

Very tough to do without javascript I believe.

Give this CSS a shot:

:target:before {
	content:"";
	display:block;
	height:60px; /* fixed header height*/
	margin:-60px 0 0; /* negative fixed header height */
}

[Garth Dryland]

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

[Tom]

Hi there,

I’ll look into adding this feature into Menu Plus if sticky navigation is enabled. I’ll try to detect if we’re jumping to an anchor, and if so, offset the position by the height of the navigation.

Will update this thread once I do so 🙂

[Tom]

This javascript might be a good start: https://jsfiddle.net/ianclark001/aShQL/

[Garth Dryland]

Awesome Tom

That looks like a fantastic place to start.

GP users and their readers are bound to appreciate this tweak to the menu plus module.

Cheers

[Tom]

I agree – it will even be helpful here on this site 🙂

[Garth Dryland]

Hey Tom

Just wondering how you’re going with this. Was that .JS very helpful?
Do you have any idea when GP users may expect to see this released?

Cheers

[Tom]

Thanks for the reminder – will try to get this into the next version.

[Tom]

This is really tough actually to get it to perform consistently. I’ll need to play with it more so I’m 100% happy with it before releasing it.

For now, this seems like a good solution: https://generatepress.com/forums/topic/offset-anchors-with-fixed-header/#post-190498

[Garth Dryland]

Hi Tom

Yeah I found the css above worked best when the menu plus floating menu had no effect active.

I assume it would be the same situation with the .anchor css linked off this page also.

Hopefully a .js solution to automate this doesn’t prove to be to much of a headache.

[Tom]

It’s definitely a headache, I’ll keep working on it though.

[Garth Dryland]

Hey Tom

While I was going over the other issues this week I also checked this.

Was it forgotten about ? Where are you at with this one ?

Cheers

[Tom]

Not forgotten about, but no solid solution found yet.

I’m keeping an eye out for something I would be comfortable with adding to GP Premium.

[Garth Dryland]

Hi Tom

Okay, sounds good.

Cheers

[Author]

Posts