diff --git a/kit/css/header.css b/kit/css/header.css
index 81de2ba..8a2b837 100644
--- a/kit/css/header.css
+++ b/kit/css/header.css
@@ -146,10 +146,22 @@ header:not(.sticky-header) .header-button-container {
order: 2;
margin-left: 2rem;
display: none;
+ color: #333333;
}
-.header-lang-small span:hover {
- color: red;
+.header-lang-small .icon {
+ margin-top: 0.05rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ background-repeat: no-repeat;
+ background-position: left center;
+ background-size: contain;
+ mask: url('../img/ios-arrow-down.svg') no-repeat center / contain;
+ background-color: #333333;
+}
+
+.header-lang-small .icon.active {
+ mask: url('../img/ios-arrow-up.svg');
}
.header-lang-small li:not(.active) {
@@ -162,11 +174,37 @@ header:not(.sticky-header) .header-button-container {
text-overflow: hidden;
max-width: 2.1ch;
font-weight: 500;
- color: #333333;
margin-right: 5px;
text-transform: uppercase;
}
+.header-lang-small .dropdown {
+ position: relative;
+ display: none;
+}
+
+.header-lang-small .dropdown .dropdown-content {
+ position: absolute;
+ top: 42px;
+ left: -120px;
+ padding: 15px;
+ background-color: white;
+ width: 120px;
+ text-align: right;
+ text-transform: uppercase;
+ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
+}
+
+.header-lang-small .dropdown .dropdown-content li:not(.active) {
+ display: block;
+ padding: 5px 0;
+ font-weight: 500;
+}
+
+.header-lang-small .dropdown .dropdown-content li.active {
+ display: none;
+}
+
.header-lang {
position: absolute;
top: 5px;
diff --git a/kit/footer.php b/kit/footer.php
index a4f635d..02e9a24 100644
--- a/kit/footer.php
+++ b/kit/footer.php
@@ -110,6 +110,7 @@
+
diff --git a/kit/functions.php b/kit/functions.php
index baefab0..25b7bcf 100644
--- a/kit/functions.php
+++ b/kit/functions.php
@@ -157,7 +157,16 @@ function kit_customize_css()
color: ;
}
- .header-lang-small:hover{
+ /* change color on hover for language selector on mobile view */
+ .header-lang-small:hover li.active span {
+ color: ;
+ }
+
+ .header-lang-small:hover .icon {
+ background-color: ;
+ }
+
+ .dropdown-content li:hover span {
color: ;
}
diff --git a/kit/header.php b/kit/header.php
index 2f15a81..ddedeef 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -107,7 +107,16 @@
wpm_language_switcher ('list','name');
};
?>
-
+