hey Ismael,
yes, I added that code. the client has asked that it does stick to the top of the screen on mobile (on scroll – not how i’ve done it).
can you shed any light as to how i might go about that? or, an argument as to why its a bad idea – so i can feedback to the client?
thanks heaps :)
Jason

thanks Ismael, i never even thought of looking for a plugin, will give it a shot & report back

Hi Mike,
Thanks heaps for your reply, that should work a treat, I’ll give it a shot & report back :)

ok, i’ve found some other references to something similar to what i want to do, but i’m still not having any luck adding a different post style for each category
i did find this post Grid Layout change background by category but i’m a little stuck on the comment by Yigit

You can copy the file inside “shortcodes” folder on your child theme and add this code in Functions.php file of your child theme

i’ve followed along as best i can, but i’m still not getting the unique category css class added to the post (in order to style it).
any additional pointers?
thanks heaps,
Jason

Hi Victoria,
That makes sense – any chance you could point me in the right direction with regard to those files?

perfect, thank you Nikko

sorry about the delay – details below

i cleared my cache at cloudflare, the js file was (from memory) common-min.js (or simiar).
if you’re not using cloudflare, then it’ll be whatever you (or your host) uses for caching that you’ll need to clear.
hope that helps!

thanks Victoria, I had a funny feeling that might be the case… ;-)

cool, thanks Victoria – just one more question if i may, what template file should i be modifying please?

i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.

no, i’m wrong – didn’t work. it seems there’s a pseudo class which handles the display of the title, & the change of background color.

.grid-entry a:hover::before {
    content: attr(title);
    position: absolute;
    width: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 1;
    font-size: 18px;
    color: 
    #fff !important;
    transform: translateY(-50%);
    animation: avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275) !important;
    top: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

this is showing the title on mobile – but not changing the background color. i’ve been trying unsuccessfully to sort this, can I use :active with :before ?
can’t seem to get this to work no matter what i do – help?

i’ve even tried this
#top a .grid-image.avia-hover-fx:active {background:#1d2553!important;}
while i’m here should the rule go inside, or outside of a media query – given this is only mobile we’re targeting, i’d have thought inside – is that correct?

• This reply was modified 1 year, 3 months ago by  Jason.

brilliant – thank you Nikko, i’ll take a look & report back :)