diff --git a/js/src/components/app-sub-nav/index.js b/js/src/components/app-sub-nav/index.js
index d2cf01ab08..4085325e7d 100644
--- a/js/src/components/app-sub-nav/index.js
+++ b/js/src/components/app-sub-nav/index.js
@@ -36,7 +36,11 @@ const AppSubNav = ( props ) => {
 					<>
 						<Link
 							key={ tab.key }
-							className={ classnames( { current: isCurrent } ) }
+							className={ classnames( {
+								current: isCurrent,
+								// Workaround for https://github.com/woocommerce/woocommerce-admin/issues/7772.
+								'gla-sub-nav__item--current': isCurrent,
+							} ) }
 							tabIndex={ isCurrent ? null : -1 }
 							id={ `${ tab.key }` }
 							href={ tab.href }
diff --git a/js/src/components/app-sub-nav/index.scss b/js/src/components/app-sub-nav/index.scss
index 55bd73bfae..23ca74bcce 100644
--- a/js/src/components/app-sub-nav/index.scss
+++ b/js/src/components/app-sub-nav/index.scss
@@ -2,4 +2,15 @@
 	float: none;
 	text-align: left;
 	margin: calc(var(--main-gap) * -1 / 3) 0 var(--main-gap) 0;
+
+	// Duplicate WordPress's `.current` styles as `.gla-sub-nav__item--current`,
+	// to wrok around https://github.com/woocommerce/woocommerce-admin/issues/7772
+	// which removes all `current` classes.
+	.gla-sub-nav__item--current {
+		// https://github.com/WordPress/wordpress-develop/blob/5.8.1/src/wp-admin/css/common.css#L448-L451
+		font-weight: 600;
+		border: none;
+		// https://github.com/WordPress/wordpress-develop/blob/5.8.1/src/wp-admin/css/common.css#L683-L685
+		color: #000;
+	}
 }
diff --git a/js/src/components/navigation-classic/main-tab-nav.js b/js/src/components/navigation-classic/main-tab-nav.js
index 2efafaa0be..ae8646973a 100644
--- a/js/src/components/navigation-classic/main-tab-nav.js
+++ b/js/src/components/navigation-classic/main-tab-nav.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getNewPath, getPath } from '@woocommerce/navigation';
 
@@ -10,6 +9,7 @@ import { getNewPath, getPath } from '@woocommerce/navigation';
  */
 import { glaData } from '.~/constants';
 import AppTabNav from '.~/components/app-tab-nav';
+import useLegacyMenuEffect from '.~/hooks/useLegacyMenuEffect';
 
 let tabs = [
 	{
@@ -46,25 +46,7 @@ const getSelectedTabKey = () => {
 };
 
 const MainTabNav = () => {
-	useEffect( () => {
-		// Highlight the wp-admin dashboard menu
-		const marketingMenu = document.querySelector(
-			'#toplevel_page_woocommerce-marketing'
-		);
-
-		if ( ! marketingMenu ) {
-			return;
-		}
-
-		const dashboardLink = marketingMenu.querySelector(
-			"a[href^='admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard']"
-		);
-
-		marketingMenu.classList.add( 'current', 'wp-has-current-submenu' );
-		if ( dashboardLink ) {
-			dashboardLink.parentElement.classList.add( 'current' );
-		}
-	}, [] );
+	useLegacyMenuEffect();
 
 	const selectedKey = getSelectedTabKey();
 
diff --git a/js/src/hooks/useLegacyMenuEffect.js b/js/src/hooks/useLegacyMenuEffect.js
new file mode 100644
index 0000000000..53127dd426
--- /dev/null
+++ b/js/src/hooks/useLegacyMenuEffect.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import isWCNavigationEnabled from '.~/utils/isWCNavigationEnabled';
+
+/**
+ * Mocked result of parsing a page entry from {@link /js/src/index.js} by WC-admin's <Route>.
+ *
+ * @see https://github.com/woocommerce/woocommerce-admin/blob/release/2.7.1/client/layout/controller.js#L240-L244
+ */
+const dashboardPage = {
+	match: { url: '/google/dashboard' },
+	wpOpenMenu: 'toplevel_page_woocommerce-marketing',
+};
+
+/**
+ * Effect that highlights the GLA Dashboard menu entry in the legacy WC menu.
+ *
+ * Should be called for every "root page" (`.~/pages/*`) that wants to open the GLA menu.
+ *
+ * The hook could be removed once WC Navigation will be always enabled,
+ * or if we make the plugin fully use the routing feature of WC,
+ * and let this be done by proper matching of URL matchers from {@link /js/src/index.js}
+ *
+ * @see window.wpNavMenuClassChange
+ */
+export default function useLegacyMenuEffect() {
+	const navigationEnabled = isWCNavigationEnabled();
+	return useEffect( () => {
+		// Highlight the wp-admin dashboard menu
+		if ( ! navigationEnabled ) {
+			window.wpNavMenuClassChange(
+				dashboardPage,
+				dashboardPage.match.url
+			);
+		}
+	}, [ navigationEnabled ] );
+}
diff --git a/js/src/settings/index.js b/js/src/settings/index.js
index 57115bf77b..4f3f7a1d84 100644
--- a/js/src/settings/index.js
+++ b/js/src/settings/index.js
@@ -7,6 +7,7 @@ import { getQuery, getHistory } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
+import useLegacyMenuEffect from '.~/hooks/useLegacyMenuEffect';
 import useGoogleAccount from '.~/hooks/useGoogleAccount';
 import { subpaths, getReconnectAccountsUrl } from '.~/utils/urls';
 import NavigationClassic from '.~/components/navigation-classic';
@@ -19,6 +20,9 @@ import './index.scss';
 
 const Settings = () => {
 	const { subpath } = getQuery();
+	// Make the component highlight GLA entry in the WC legacy menu.
+	useLegacyMenuEffect();
+
 	const { google } = useGoogleAccount();
 	const isReconnectAccountsPage = subpath === subpaths.reconnectAccounts;