Header in standard post using masonry

Home Forums Support Header in standard post using masonry

Home Forums Support Header in standard post using masonry

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #181177
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #182327
    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

    #182434
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #182444
    Tom
    Lead Developer
    Lead Developer
    #182449
    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

    #182454
    Tom
    Lead Developer
    Lead Developer

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

    #189657
    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

    #189683
    Tom
    Lead Developer
    Lead Developer

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

    #191152
    Tom
    Lead Developer
    Lead Developer

    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

    #191294
    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.

    #191361
    Tom
    Lead Developer
    Lead Developer

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

    #210267
    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

    #210339
    Tom
    Lead Developer
    Lead Developer

    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.

    #210429
    Garth Dryland

    Hi Tom

    Okay, sounds good.

    Cheers

Viewing 14 posts - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.