diff --git a/js/scripts.js b/js/scripts.js
index 6242d54..053d276 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -119,5 +119,39 @@ jQuery(document).ready(function($) {
if ($(window).width() >= 1024){
$('.stickyfill').Stickyfill();
}
+
+/* Trap focus
+/* ------------------------------------ */
+ // add all the elements inside modal which you want to make focusable
+ const focusableElements =
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+ const modal = document.querySelector('.search-trap-focus'); // select the modal by it's id
+
+ if ( modal ) {
+ const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
+ const focusableContent = modal.querySelectorAll(focusableElements);
+ const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+
+
+ document.addEventListener('keydown', function(e) {
+ let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+ if (!isTabPressed) {
+ return;
+ }
+
+ if (e.shiftKey) { // if shift key pressed for shift + tab combination
+ if (document.activeElement === firstFocusableElement) {
+ lastFocusableElement.focus(); // add focus for the last focusable element
+ e.preventDefault();
+ }
+ } else { // if tab key is pressed
+ if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
+ firstFocusableElement.focus(); // add focus for the first focusable element
+ e.preventDefault();
+ }
+ }
+ });
+ }
});
\ No newline at end of file
diff --git a/languages/split.pot b/languages/split.pot
index 7cd612b..1129d30 100644
--- a/languages/split.pot
+++ b/languages/split.pot
@@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Split\n"
-"POT-Creation-Date: 2020-08-25 15:30+0200\n"
+"POT-Creation-Date: 2021-03-05 15:48+0100\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@@ -10,7 +10,7 @@ msgstr ""
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
-"X-Generator: Poedit 2.2.3\n"
+"X-Generator: Poedit 2.4.2\n"
"X-Poedit-KeywordsList: __;_e;_x;_ex;_n;_nx;_n_noop;_nx_noop;"
"translate_nooped_plural;number_format_i18n;date_i18n;esc_html__;esc_html_e;"
"esc_html_x;esc_attr__;esc_attr_e;esc_attr_x\n"
@@ -86,79 +86,79 @@ msgstr ""
msgid "Footer"
msgstr ""
-#: functions.php:181
+#: functions.php:183
msgid "Primary"
msgstr ""
-#: functions.php:181
+#: functions.php:183
msgid "Normal full width sidebar"
msgstr ""
-#: functions.php:183 functions/theme-options.php:274
+#: functions.php:185 functions/theme-options.php:274
msgid "Header Ads"
msgstr ""
-#: functions.php:184 functions/theme-options.php:301
+#: functions.php:186 functions/theme-options.php:301
msgid "Footer Ads"
msgstr ""
-#: functions.php:184
+#: functions.php:186
msgid "Footer ads area"
msgstr ""
-#: functions.php:186
+#: functions.php:188
msgid "Frontpage Top 1"
msgstr ""
-#: functions.php:186 functions.php:187 functions.php:188 functions.php:189
+#: functions.php:188 functions.php:189 functions.php:190 functions.php:191
msgid "Frontpage area"
msgstr ""
-#: functions.php:187
+#: functions.php:189
msgid "Frontpage Top 2"
msgstr ""
-#: functions.php:188
+#: functions.php:190
msgid "Frontpage Bottom 1"
msgstr ""
-#: functions.php:189
+#: functions.php:191
msgid "Frontpage Bottom 2"
msgstr ""
-#: functions.php:191
+#: functions.php:193
msgid "Footer 1"
msgstr ""
-#: functions.php:191 functions.php:192 functions.php:193 functions.php:194
+#: functions.php:193 functions.php:194 functions.php:195 functions.php:196
msgid "Widgetized footer"
msgstr ""
-#: functions.php:192
+#: functions.php:194
msgid "Footer 2"
msgstr ""
-#: functions.php:193
+#: functions.php:195
msgid "Footer 3"
msgstr ""
-#: functions.php:194
+#: functions.php:196
msgid "Footer 4"
msgstr ""
-#: functions.php:687
+#: functions.php:689
msgid "Alx Extensions"
msgstr ""
-#: functions.php:691
+#: functions.php:693
msgid "Meta Box"
msgstr ""
-#: functions.php:695
+#: functions.php:697
msgid "Regenerate Thumbnails"
msgstr ""
-#: functions.php:699
+#: functions.php:701
msgid "WP-PageNavi"
msgstr ""
@@ -187,24 +187,24 @@ msgstr ""
msgid "Post Options"
msgstr ""
-#: functions/nav.php:167
+#: functions/nav.php:170
msgid "Expand Menu"
msgstr ""
-#: functions/nav.php:209
+#: functions/nav.php:212
msgid "Toggle Child Menu"
msgstr ""
-#: functions/nav.php:283 functions/nav.php:297
+#: functions/nav.php:286 functions/nav.php:300
#, php-format
msgid "
%1$s %2$s"
msgstr ""
-#: functions/nav.php:284
+#: functions/nav.php:287
msgid "Current Page:"
msgstr ""
-#: functions/nav.php:298
+#: functions/nav.php:301
msgid "Current Page Parent"
msgstr ""
@@ -788,7 +788,7 @@ msgstr ""
msgid "Give your thumbnails and layout images rounded corners"
msgstr ""
-#: header.php:17
+#: header.php:19
msgid "Skip to content"
msgstr ""
diff --git a/style.css b/style.css
index d8e3119..f9c4c10 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,10 @@
/*
Theme Name: Split
Theme URI: http://alx.media/themes/split/
-Version: 1.4.1
+Version: 1.4.2
Requires at least: 5.0
Requires PHP: 5.6
-Tested up to: 5.5
+Tested up to: 5.6
Description:
Split is a responsive 100% high resolution theme for blogs and magazines. The feature list is long: Unlimited accent colors, unlimited widget areas, sidebar to the right that can be uniquely specified for each page or post, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured stories and carousel, 5 post formats, good SEO, 2 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features.
Author: Alexander Agnarson
Author URI: http://alx.media
@@ -554,13 +554,13 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav-menu:not(.mobile) .menu { flex-wrap: wrap; justify-content: flex-start; }
.nav-menu:not(.mobile) .menu ul.active,
-.nav-menu:not(.mobile) .menu li.hover > ul { overflow: visible; width: 180px; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
-.nav-menu:not(.mobile) .menu ul .sub-menu { left: 200px; top: 0; }
+.nav-menu:not(.mobile) .menu li.hover > ul { overflow: visible; width: 200px; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
+.nav-menu:not(.mobile) .menu ul .sub-menu { left: 220px; top: 0; }
.nav-menu:not(.mobile) .menu { position: relative; }
.nav-menu:not(.mobile) .menu ul { font-size: 15px; opacity: 0; padding: 10px 0; position: absolute; top: calc(100% + 20px); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(6px); z-index: 1; }
.nav-menu:not(.mobile) .menu ul li { position: relative; }
.nav-menu:not(.mobile) .menu ul a { display: block; padding: 10px 20px; transition: background-color 0.15s linear; width: 100%; }
-.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul { min-width: 180px; max-width: 180px; max-height: 300vh; overflow: visible; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
+.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul { min-width: 200px; max-width: 200px; max-height: 300vh; overflow: visible; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul:focus-within { opacity: 1!important; }
.nav-menu:not(.mobile) .menu li ul.sub-menu:not(.active) { opacity: 0; }
.nav-menu:not(.mobile) .menu li.hover ul.sub-menu:not(.active) { opacity: 1; }
@@ -596,6 +596,12 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav-menu.mobile ul ul ul li a { padding: 12px 0 12px 60px; }
.nav-menu.mobile ul button { margin: 10px 0; padding: 0 20px; }
+/* menu mobile fix */
+.nav-menu.mobile > div > ul.menu,
+.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu { visibility: hidden; transition: all 0.3s ease; }
+.nav-menu.mobile.toggled > div > ul.menu,
+.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu.active { visibility: visible; }
+
/* menu styling */
.nav-menu a { color: #fff; }
.nav-menu .svg-icon { fill: #333; }