diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
index 60bd19641..ee3ca7aaa 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
@@ -1,4 +1,4 @@
-import { useCallback } from '@wordpress/element';
+import { useCallback, useLayoutEffect } from '@wordpress/element';
 import { Button, Icon } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 import classNames from 'classnames';
@@ -34,6 +34,11 @@ const TopNavigation = ( {
 		}
 	}, [ exitOnTitleClick, goToWooCommercePaymentsTab, onTitleClick ] );
 
+	// Removes the excess padding at the top of the navigation bar.
+	useLayoutEffect( () => {
+		window.dispatchEvent( new Event( 'resize' ) );
+	}, [] );
+
 	return (
 		<div className={ className }>
 			<div className="ppcp-r-navigation">