Trouble Creating Hover Animations for Clickable Links

Site URL: https://www.jaxmariephotography.com

Hi!
I am having a little trouble creating hover animations for the clickable links:

1. I would like the hover animation for the header to look something like the 1st video attached below. There should be no underline animation for the links  drop down menu under "Portfolio."  ("Beverages," "Editorial," and "Desserts") because there is already a cell color inverter hover animation for these links. 
2. I would like the "Beverages," "Editorial," and "Desserts" links in the banner on the homepage to lessen in opacity when they are hovered over (no underline animation here).
3. For the footer, I would like each link to have an underline drawn under when the user hovers over (like the 2nd video attached).

All of these animations should only apply to the desktop view of the site and not on the phone or tablet.
I am a complete beginner when it comes to custom CSS so any help (with any of the animations) would be greatly appreciated! Thank you!

Add to Design > Custom CSS

/* remove nav links underline */
div.header-nav-item a {
    background-image: none !important;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* remove nav links underline */
div.header-nav-item a {
    background-image: none !important;
}

 

Thanks for the help but this isn't what I wanted to change. What I wanted to do was to create animations for the header and footer (as described above). Please reference the first post for more specifics.