Difficulty Customizing Hovered Text Fill in Dropdown Menu

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

Password: fbla2020

Hi, I'm having a bit of trouble customizing the fill of the text in the dropdown menu. There are 2 pages that have dropdowns, the "Portfolio" page and the "Contact" Page. When I am not in one of these pages and I am looking at the dropdown menus, everything works fine and each tab under the dropdown is highlighted (black background and white text) as I want it. However, when I am in one of these pages with a dropdown and I try to navigate to the other tabs, the white text becomes greyed out like a hyperlink (as seen in the second image where I am under "Portfolio" and the "Beverages" text becomes grey). Is there a way to customize the dropdown menus, and only the dropdown menus so that the text stays white (and doesn't grey out) when I hover over it? Any custom CSS would be greatly appreciated!

Add the following CSS.

body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-item--active a:hover {

  opacity: unset;
  
  }

Let us know how it goes.

5 minutes ago, creedon said:

Add the following CSS.

body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-item--active a:hover {

  opacity: unset;
  
  }

It seems to be working! Thanks for the help!

On 12/20/2020 at 4:33 AM, jaxnoel said:

It seems to be working! Thanks for the help!

I see footer email break on Tablet. If you check, you can see.

Add to Home > Design > Custom CSS to solve

/* footer text */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5fdd03545e120c428cd05541>.row>.span-4:first-child {
    width: 40%;
}
div#page-section-5fdd03545e120c428cd05541>.row>.span-4:not(:first-child) {
    width: 30%;
}
}

Pagination on this page has alo problem (on tablet). https://www.jaxmariephotography.com/portfolio-beverages

On 12/21/2020 at 9:00 PM, tuanphan said:

I see footer email break on Tablet. If you check, you can see.

Add to Home > Design > Custom CSS to solve

/* footer text */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5fdd03545e120c428cd05541>.row>.span-4:first-child {
    width: 40%;
}
div#page-section-5fdd03545e120c428cd05541>.row>.span-4:not(:first-child) {
    width: 30%;
}
}

Pagination on this page has alo problem (on tablet). https://www.jaxmariephotography.com/portfolio-beverages

Thanks for letting me know! I will definitely try it out.