Portfolio Filtering animation missing or turned off

It seems the difference in filter change is because your site reloads the page and Nathaliechapple does not. It instead alters what masonry blocks are visible. I believe the transition animation is done by the masonry script. But you’d need script that alters what’s visible instead of reloading the page.

Why does yours reload and Nathaliechapple does not? It could be they use a separate filtering plugin different than yours. Or there are different versions of the same filtering plugin. Maybe there’s a backend setting somewhere where you can choose between reload or visibility filtering. That MIA dev is the only person who could accurately give us the answer.

Maybe your best option at this point is to find a masonry compatible filtering plugin that does not reload but only changes visibility. Sorry, I do not have any specific plugin suggestions.

It’s unclear to me what Nathaliechapple dropdown menus are doing that you want on your site. Other than the background color, I don’t see the difference.

Thanks bcworkz,

I think I need to look at what nathaliechapple.com is doing in the masonry script. I used to delve into this stuff years ago. I have sort of forgotten what i knew back then. I’ve looked for plugins but this portfolio section of the theme is essentially a “plugin”. Nothing seems to play nice with it. RE the dropdown menus on nathaliechapple.com, you have to be on the “about link, then roll over to the Projects link to see the hover change. Even the nathalie website is only working 1/2 way, heh. Thanks again.

The only way to achieve filter transition animation is to change visible content on the current page. When we reload, there’s nothing to animate from, we’re already at the destination. I don’t know if this helps, but it looks like nathaliechapple uses this JS library to manage filtering and layout.

Regarding the Projects menu item, when on the About page, the only difference I see is the project sub-menu items are not highlighted except on roll over. I think having all projects highlighted when on the projects page is an error. Behavior of the sub-menu should be the same as when on About or any other page. Also, when viewing one of the individual project pages, it’s menu item alone should be highlighted as the current page, but it’s not.

Anyway, I’m still not clear what it is that your’re trying to replicate here. If you want some kind of roll over effect, add CSS similar to:

.sidebar-top.nav-horizontal #sidebar div.section.sub .entry-menu ul.sub-menu li.menu-item a:hover {
    background-color: green;
}

Background color is just an example. Apply whatever hover/roll-over styling you want. You could embolden the font for example. Or make the default menu link color light gray and on roll over it could change to bright white.

Thanks! I deployed that code you sent and I am at least able to get a visual variation on those blue drop-downs. Wish I could figure out how to change that blue background color to gray. Is this in the style.CSS file?

It seems to be calling that blue color from somewhere. In the WordPress Customizer i have been through this over and over and still can’t find the tool to change the color. i have looked ant the style.css and nothing jumps out. – – – – – – –

RE: the isotope JS code. i found a file in the “third party” folder. this is what the header says;

/*!

• Isotope PACKAGED v2.0.0-beta.3
• Magical sorting and filtering layouts
• https://isotope.metafizzy.co
  */

Maybe this was turned off? Where can I look?

Thanks again! Making progress!

I think i figured out the DropDown color issue.

No more blue background! w00t! ??

As for Isotope, I’ve never used it, I know next to nothing about it. It’s apparently a jQuery extension, so both Isotope and jQuery libraries need to be script tag referenced on the page. (appears to be the case)

Also, in JS script somewhere Isotope needs to be intialized. It needs to be done in a way that coordinates its selectors with your HTML classes.

There’s likely more to it than that, but these steps must be done first. Refer to Isotope docs for what else to do based on your particular needs. For example, review the Filtering and Layout sections.

Thanks bcworks,

If I get time, I’l get back into the jQuery stuff. For now it seems to be serving its intended purpose. I need a break, heh! Cheers!