Independent Publisher 2: Correct submenu offset

independent-publisher-2/functions.php

@@ -209,6 +209,8 @@ function independent_publisher_2_scripts() {
 
 	wp_enqueue_script( 'independent-publisher-2-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20170317', true );
 
+	wp_enqueue_script( 'independent-publisher-2-subnavigation', get_template_directory_uri() . '/js/subnavigation.js', array('independent-publisher-2-navigation'), '20190212', true );
+
 	if ( ! is_active_sidebar( 'sidebar-1' ) ) {
 		wp_enqueue_script( 'independent-publisher-2-images', get_template_directory_uri() . '/js/independent-publisher-2.js', array( 'jquery' ), '20170406', true );
 	}

independent-publisher-2/js/subnavigation.js

@@ -0,0 +1,52 @@
+/**
+ * File subnavigation.js.
+ *
+ * Correct drop-down menu offsets to ensure that the submenu is completely visible.
+ */
+
+/**
+* Check if an element is out of the viewport
+* (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
+* @see https://vanillajstoolkit.com/helpers/isoutofviewport/
+* @param  {Node}    element The element to check
+* @return {Boolean}         Whether the element overflows to the right-hand side
+*/
+const isOutOfViewport = function (element) {
+    const bounding = element.getBoundingClientRect();
+    const out = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
+    return out;
+};
+
+/**
+ * Polyfill for getBoundingClientRect
+ * @see https://gist.github.com/afterburn/a752b59172751c6900990f659cfb4481
+ */
+Element.prototype._getBoundingClientRect = Element.prototype.getBoundingClientRect
+Element.prototype.getBoundingClientRect = function () {
+    const rect = Element.prototype._getBoundingClientRect.call(this)
+    rect.x = rect.left
+    rect.y = rect.top
+    return rect
+}
+
+/**
+ * Correct drop-down offset
+ * @param  {Node} element The element to check
+ * @return void
+ */
+const correctDropDownOffset = function (event) {
+    if (event.target.matches('a')) {
+        const submenu = event.target.parentNode.childNodes[2];
+        submenu.classList.remove('fix-right');
+        const offset = isOutOfViewport(submenu);
+        if (offset) {
+            submenu.classList.add('fix-right');
+        }
+    }
+};
+
+/**
+ * Handle mouseover event
+ */
+const menu = document.querySelector('#primary-menu');
+menu.addEventListener('mouseover', correctDropDownOffset, false);

independent-publisher-2/style.css

@@ -1083,6 +1083,10 @@ input::-moz-focus-inner {
 	padding-left: 10.5em;
 }
 
+.main-navigation li:hover ul.sub-menu.fix-right {
+	right: 0;
+}
+
 .has-header-image .menu-toggle {
 	color: white;
 	border-color: white;