diff --git a/Configuration/TypoScript/Library/plugin.dyncss.setupts b/Configuration/TypoScript/Library/plugin.dyncss.setupts
index 0f07a229..8d3a8fbc 100644
--- a/Configuration/TypoScript/Library/plugin.dyncss.setupts
+++ b/Configuration/TypoScript/Library/plugin.dyncss.setupts
@@ -67,6 +67,15 @@ plugin.tx_dyncss.overrides {
     mobile-nav-toggle-btn {
         value = {$themes.configuration.less.var.mobileNavToggleBtn}
         if.isTrue = {$themes.configuration.less.var.mobileNavToggleBtn}
+        value {
+            override = right
+            override {
+                if {
+                    value = bottom_right
+                    equals.dataWrap = {$themes.configuration.less.var.mobileNavToggleBtn}
+                }
+            }
+        }
     }
 
     header-middle-height = TEXT
diff --git a/Configuration/TypoScript/Library/themes.less.constantsts b/Configuration/TypoScript/Library/themes.less.constantsts
index 4da54f35..09671f78 100644
--- a/Configuration/TypoScript/Library/themes.less.constantsts
+++ b/Configuration/TypoScript/Library/themes.less.constantsts
@@ -95,7 +95,7 @@ themes.configuration.less.var.headerBorderColor =
 # customsubcategory=main_menu=Main Menu
 # cat=menu,advanced/main_menu; type=string; label= Navigation Height
 themes.configuration.less.var.navHeight =
-# cat=menu,advanced/main_menu; type=options[left,right]; label= Mobile Navigation Toggle Btn
+# cat=menu,advanced/main_menu; type=options[left,right,bottom_right]; label= Mobile Navigation Toggle Btn
 themes.configuration.less.var.mobileNavToggleBtn = left
 
 # customsubcategory=header_main_menu_colors= Main Menu Colors
diff --git a/Configuration/TypoScript/Library/themes.menu.constantsts b/Configuration/TypoScript/Library/themes.menu.constantsts
index 6f08b28f..267d9a47 100644
--- a/Configuration/TypoScript/Library/themes.menu.constantsts
+++ b/Configuration/TypoScript/Library/themes.menu.constantsts
@@ -21,6 +21,7 @@ themes.configuration.menu.main.enableLogoInNavigation = 0
 # cat=menu,advanced/main_menu; type=options[0,1]; label= Enable LangMenu in navigation menu
 themes.configuration.menu.main.enableLangMenuInNavigation = 0
 
+
 # Sub Menu
 #############################################
 # customsubcategory=menu_sub= Sub Menu
diff --git a/Resources/Private/Partials/Footer/Footer.html b/Resources/Private/Partials/Footer/Footer.html
index 60323e0b..2a565e5b 100644
--- a/Resources/Private/Partials/Footer/Footer.html
+++ b/Resources/Private/Partials/Footer/Footer.html
@@ -6,7 +6,7 @@
 <!-- theme_t3kit: Partials/Footer/Footer.html [begin] -->
 
 
-<footer class="footer" role="contentinfo">
+<footer class="footer  {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'mobile-nav__bottom')}" role="contentinfo">
 	
 	<f:comment>H2 is needed to provide valid HTML structure https://www.w3.org/WAI/tutorials/page-structure/headings/</f:comment>
 	<h2 class="sr-only"><f:translate key="footer.firstHeadline" extensionName="theme_t3kit"/></h2>
diff --git a/Resources/Private/Partials/Header/Header.html b/Resources/Private/Partials/Header/Header.html
index f6da1ddf..7e19dc42 100644
--- a/Resources/Private/Partials/Header/Header.html
+++ b/Resources/Private/Partials/Header/Header.html
@@ -5,7 +5,7 @@
 
 <!-- theme_t3kit: Partials/Header/Header.html [begin] -->
 
-<header class="header">
+<header class="header {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'mobile-nav__bottom')}">
 	<div class="header-top-wrp">
 
 		<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderTop')}">
@@ -78,7 +78,7 @@
 <!-- theme_t3kit: Main menu [begin] -->
 
 	<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderTop')}==0">
-		<button type="button" class="main-navigation__toggle-btn js__main-navigation__toggle-btn" >
+		<button type="button" class="main-navigation__toggle-btn js__main-navigation__toggle-btn {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'   || {theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'right\'', then: 'navigation-toggle__mobile-right')}" >
 			<span>toggle menu</span>
 		</button>
 		<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLangMenuInNavigation')}">
@@ -88,7 +88,7 @@
 		</f:if>
 	</f:if>
 
-	<nav id="main-navigation" class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
+	<nav id="main-navigation" class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')} {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'main-navigation__mobile-bottom')}">
 		<div class="main-navigation__items-wrp js__navigation__items-wrp">
 			<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLogoInNavigation')}">
 				<div class="main-navigation__logo">
diff --git a/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html b/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
index c00fc6f1..44556ef7 100644
--- a/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
+++ b/Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
@@ -2,7 +2,7 @@
       xmlns:theme="http://typo3.org/ns/KayStrobach/Themes/ViewHelpers"
       data-namespace-typo3-fluid="true">
 <f:if condition="{languages}">
-    <div class="header-top__language-menu">
+    <div class="header-top__language-menu  {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'  || {theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'right\'', then: 'navigation-language__mobile-right')}">
         <f:for each="{languages}" as="language">
             <f:if condition="{language.active}">
                 <a class="header-top__language-menu-btn js__header-top__language-menu-btn" href="#">
diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
index 7135364b..054bf930 100644
--- a/Resources/Public/css/main.css
+++ b/Resources/Public/css/main.css
@@ -424,11 +424,12 @@
   z-index: 5001;
   display: block;
 }
-.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
-  width: auto;
-  min-width: 150px;
+.main-navigation-mobile__language-menu .header-top__language-menu-box {
   background: #fff;
   top: 1px;
+  left: auto;
+  right: auto;
+  width: 100vw;
 }
 .main-navigation .header-top__language-menu-box-close-btn {
   top: 5px;
@@ -1200,6 +1201,14 @@
 .mobile-menu-opened .main-navigation__toggle-btn span:before {
   transition-delay: 0, 0.2s;
 }
+@media (max-width: 991px) {
+  .main-navigation-mobile__language-menu .navigation-language__mobile-right {
+    right: unset;
+  }
+  .navigation-toggle__mobile-right span {
+    left: unset;
+  }
+}
 @media (min-width: 992px) {
   .main-navigation__toggle-btn {
     display: none;
@@ -1270,6 +1279,40 @@
   margin-left: 2px;
   display: block;
 }
+@media (max-width: 991px) {
+  .mobile-nav__bottom > .main-navigation__toggle-btn {
+    top: auto;
+    bottom: 0;
+    z-index: 5001;
+  }
+  .mobile-nav__bottom .header-top-wrp {
+    position: static;
+    padding-bottom: 0;
+  }
+  .mobile-nav__bottom .header-top {
+    bottom: 0;
+  }
+  .mobile-nav__bottom .main-navigation__mobile-bottom {
+    transform: translateY(100vh);
+    transition: transform 0.3s ease;
+    height: calc(100vh - 50px);
+    min-height: calc(100vh - 50px);
+    z-index: 5000;
+    top: 0;
+  }
+  .mobile-nav__bottom .header-top__language-menu-box {
+    top: auto;
+    bottom: 0;
+  }
+  .mobile-nav__bottom .navigation-language__mobile-right {
+    top: unset;
+    bottom: 0;
+  }
+  .mobile-menu-opened .main-navigation__mobile-bottom {
+    transform: translateY(0);
+    top: 0;
+  }
+}
 .footer {
   background: #181818;
   border-top: 15px solid #181818;
@@ -1310,6 +1353,11 @@
 .no-touch .footer a:hover {
   color: #85cbe4;
 }
+@media (max-width: 991px) {
+  .footer.mobile-nav__bottom {
+    margin-bottom: 50px;
+  }
+}
 .footer div[class*="frame-type-menu_"] > ul {
   list-style: none;
   padding: 0;
diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less
index fe2d0d15..114d9490 100644
--- a/Resources/Public/less/main.less
+++ b/Resources/Public/less/main.less
@@ -2682,11 +2682,12 @@
     display: block;
 }
 
-.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
-    width: auto;
-    min-width: 150px;
+.main-navigation-mobile__language-menu .header-top__language-menu-box {
     background: @header-top-bg-color;
     top: 1px;
+    left: auto;
+    right: auto;
+    width: 100vw;
 }
 
 .main-navigation .header-top__language-menu-box-close-btn {
@@ -3602,6 +3603,16 @@
     transition-delay: 0, 0.2s;
 }
 
+@media (max-width: @screen-sm-max) {
+    .main-navigation-mobile__language-menu .navigation-language__mobile-right {
+        right: unset;
+    }
+
+    .navigation-toggle__mobile-right span {
+        left: unset;
+    }
+}
+
 @media (min-width: @screen-md-min) {
     .main-navigation__toggle-btn {
         display: none;
@@ -3685,6 +3696,54 @@
     margin-left: 2px;
     display: block;
 }
+// =================================
+// === Mobile bottom toggle menu  ==
+// =================================
+
+@media (max-width: @screen-sm-max) {
+    .mobile-nav__bottom {
+        & > .main-navigation__toggle-btn {
+            top: auto;
+            bottom: 0;
+            z-index: 5001;
+        }
+
+        .header-top-wrp {
+            position: static;
+            padding-bottom: 0;
+        }
+
+        .header-top {
+            bottom: 0;
+        }
+
+        .main-navigation__mobile-bottom {
+            transform: translateY(100vh);
+            transition: transform 0.3s ease;
+            height: calc(~"100vh - @{header-top-height}");
+            min-height: calc(~"100vh - @{header-top-height}");
+            z-index: 5000;
+            top: 0;
+        }
+
+        .header-top__language-menu-box {
+            top: auto;
+            bottom: 0;
+        }
+
+        .navigation-language__mobile-right {
+            top: unset;
+            bottom: 0;
+        }
+    }
+
+    .mobile-menu-opened {
+        .main-navigation__mobile-bottom {
+            transform: translateY(0);
+            top: 0;
+        }
+    }
+}
 
 
 // FOOTER
@@ -3743,6 +3802,17 @@
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
+// === Footer space mobile navigation is placed on bottom ===========
+// ==================================================================
+@media (max-width: @screen-sm-max) {
+    .footer.mobile-nav__bottom {
+        margin-bottom: @header-top-height;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+
 // === Footer Quick Links===========
 // =================================
 .footer {
diff --git a/felayout_t3kit/dev/styles/main/footer/footer.less b/felayout_t3kit/dev/styles/main/footer/footer.less
index 9fa8c175..7a3134d8 100644
--- a/felayout_t3kit/dev/styles/main/footer/footer.less
+++ b/felayout_t3kit/dev/styles/main/footer/footer.less
@@ -53,6 +53,17 @@
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
+// === Footer space mobile navigation is placed on bottom ===========
+// ==================================================================
+@media (max-width: @screen-sm-max) {
+    .footer.mobile-nav__bottom {
+        margin-bottom: @header-top-height;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+
 // === Footer Quick Links===========
 // =================================
 .footer {
diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less
index 5e89f24d..7f1f8ea6 100644
--- a/felayout_t3kit/dev/styles/main/header/header.less
+++ b/felayout_t3kit/dev/styles/main/header/header.less
@@ -384,11 +384,12 @@
     display: block;
 }
 
-.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
-    width: auto;
-    min-width: 150px;
+.main-navigation-mobile__language-menu .header-top__language-menu-box {
     background: @header-top-bg-color;
     top: 1px;
+    left: auto;
+    right: auto;
+    width: 100vw;
 }
 
 .main-navigation .header-top__language-menu-box-close-btn {
@@ -1304,6 +1305,16 @@
     transition-delay: 0, 0.2s;
 }
 
+@media (max-width: @screen-sm-max) {
+    .main-navigation-mobile__language-menu .navigation-language__mobile-right {
+        right: unset;
+    }
+
+    .navigation-toggle__mobile-right span {
+        left: unset;
+    }
+}
+
 @media (min-width: @screen-md-min) {
     .main-navigation__toggle-btn {
         display: none;
@@ -1387,3 +1398,51 @@
     margin-left: 2px;
     display: block;
 }
+// =================================
+// === Mobile bottom toggle menu  ==
+// =================================
+
+@media (max-width: @screen-sm-max) {
+    .mobile-nav__bottom {
+        & > .main-navigation__toggle-btn {
+            top: auto;
+            bottom: 0;
+            z-index: 5001;
+        }
+
+        .header-top-wrp {
+            position: static;
+            padding-bottom: 0;
+        }
+
+        .header-top {
+            bottom: 0;
+        }
+
+        .main-navigation__mobile-bottom {
+            transform: translateY(100vh);
+            transition: transform 0.3s ease;
+            height: calc(~"100vh - @{header-top-height}");
+            min-height: calc(~"100vh - @{header-top-height}");
+            z-index: 5000;
+            top: 0;
+        }
+
+        .header-top__language-menu-box {
+            top: auto;
+            bottom: 0;
+        }
+
+        .navigation-language__mobile-right {
+            top: unset;
+            bottom: 0;
+        }
+    }
+
+    .mobile-menu-opened {
+        .main-navigation__mobile-bottom {
+            transform: translateY(0);
+            top: 0;
+        }
+    }
+}