diff --git a/resources/classes/menu.php b/resources/classes/menu.php
index b971e6fea2..4feddb6c92 100644
--- a/resources/classes/menu.php
+++ b/resources/classes/menu.php
@@ -1078,50 +1078,35 @@ if (!class_exists('menu')) {
 		public function menu_vertical($menu_array) {
 
 			//menu brand image and/or text
+				$html .= "	<div id='menu_side_control_container'>\n";
+				$html .= "		<div class='menu_side_control_state' style='float: right; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."'>\n";
+				if ($_SESSION['theme']['menu_brand_type']['text'] != 'none') {
+					$html .= "		<a class='menu_side_item_main menu_side_contract' onclick='menu_side_contract();' style='padding: 8px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "display: none;" : null)."'><i class='fas fa-bars fa-fw'></i></a>\n";
+				}
+				if ($_SESSION['theme']['menu_side_state_user']['boolean'] == 'true') {
+					$html .= "		<a class='menu_side_item_main' id='menu_side_state_set_expanded' onclick=\"menu_side_state_set('expanded');\" style='padding: 8px 14px 8px 16px !important; ".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-pin_menu']."\"><i class='fas fa-toggle-off fa-sm fa-fw'></i></a>\n";
+					$html .= "		<a class='menu_side_item_main' id='menu_side_state_set_contracted' onclick=\"menu_side_state_set('contracted'); menu_side_contract();\" style='padding: 8px 14px 8px 16px !important; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-unpin_menu']."\"><i class='fas fa-toggle-on fa-sm fa-fw'></i></a>\n";
+				}
+				$html .= "		</div>\n";
 				if ($_SESSION['theme']['menu_brand_type']['text'] == 'none') {
- 					$html = "	<div id='menu_side_control_container'>\n";
-					$html .= "		<div class='menu_side_contract' style='float: right; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."'>\n";
-					$html .= "			<a class='menu_side_item_main' id='menu_side_state_set_expanded' onclick=\"menu_side_state_set('expanded');\" style='padding: 10px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-pin_menu']."\"><i class='fas fa-toggle-off fa-fw'></i></a>\n";
-					$html .= "			<a class='menu_side_item_main' id='menu_side_state_set_contracted' onclick=\"menu_side_state_set('contracted'); menu_side_contract();\" style='padding: 10px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-unpin_menu']."\"><i class='fas fa-toggle-on fa-fw'></i></a>\n";
-					$html .= "		</div>\n";
-					$html .= "		<a class='menu_side_item_main menu_side_contract' onclick='menu_side_contract();' style='max-width: calc(100% - 50px); ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "display: none;" : null)."' title=\"".$this->text['theme-label-contract_menu']."\"><i class='fas fa-chevron-left fa-fw' style='z-index: 99800; padding-left: 1px;'></i></a>";
-					$html .= "		<a class='menu_side_item_main menu_side_expand' ".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? "style='display: none';" : null)." onclick='menu_side_expand();' title=\"".$this->text['theme-label-expand_menu']."\"><i class='fas fa-bars fa-fw' style='z-index: 99800; padding-left: 1px;'></i></a>";
-					$html .= "	</div>\n";
+					$html .= "		<a class='menu_side_item_main menu_side_contract' onclick='menu_side_contract();' style='".($_SESSION['theme']['menu_side_state_user']['boolean'] == 'true' ? "max-width: calc(100% - 50px);" : null)." ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "display: none;" : null)."' title=\"".$this->text['theme-label-contract_menu']."\"><i class='fas fa-bars fa-fw' style='z-index: 99800; padding-left: 1px;'></i></a>";
+				}
+				if ($_SESSION['theme']['menu_brand_type']['text'] == 'text') {
+					$menu_brand_text = $_SESSION['theme']['menu_brand_text']['text'] != '' ? escape($_SESSION['theme']['menu_brand_text']['text']) : "FusionPBX";
+					$html .= "		<a class='menu_brand_text' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "style='display: none;'" : null)." href='".PROJECT_PATH."/'>".$menu_brand_text."</a>\n";
+				}
+				if ($_SESSION['theme']['menu_brand_type']['text'] == 'image' || $_SESSION['theme']['menu_brand_type']['text'] == '') {
+					$menu_brand_image_contracted =  $_SESSION['theme']['menu_side_brand_image_contracted']['text'] != '' ? $_SESSION['theme']['menu_side_brand_image_contracted']['text'] : PROJECT_PATH."/themes/default/images/logo_side_contracted.png";
+					$menu_brand_image_expanded =  $_SESSION['theme']['menu_side_brand_image_expanded']['text'] != '' ? $_SESSION['theme']['menu_side_brand_image_expanded']['text'] : PROJECT_PATH."/themes/default/images/logo_side_expanded.png";
+					$html .= "		<a class='menu_brand_image' href='".PROJECT_PATH."/'>";
+					$html .= 			"<img id='menu_brand_image_contracted' style='".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? "display: none;" : null)."' src='".escape($menu_brand_image_contracted)."' title=\"".escape($menu_brand_text)."\">";
+					$html .= 			"<img id='menu_brand_image_expanded' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "style='display: none;'" : null)." src='".escape($menu_brand_image_expanded)."' title=\"".escape($menu_brand_text)."\">";
+					$html .= 		"</a>\n";
 				}
 				else {
-					$html = "	<div id='menu_side_brand_container'>\n";
-					//menu toggle buttons
-						if ($_SESSION['theme']['menu_brand_type']['text'] != 'none') {
-							$html .= "		<div style='float: right; margin-right: -20px; margin-top: -20px;'>\n";
-							$html .= "			<a class='menu_side_item_main menu_side_contract' onclick='menu_side_contract();' style='padding: 8px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "display: none;" : null)."'><i class='fas fa-chevron-left fa-fw'></i></a>\n";
-							$html .= "			<div class='menu_side_contract' style='".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."'>\n";
-							$html .= "				<a class='menu_side_item_main' id='menu_side_state_set_expanded' onclick=\"menu_side_state_set('expanded');\" style='padding: 8px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-pin_menu']."\"><i class='fas fa-toggle-off fa-fw'></i></a>\n";
-							$html .= "				<a class='menu_side_item_main' id='menu_side_state_set_contracted' onclick=\"menu_side_state_set('contracted'); menu_side_contract();\" style='padding: 8px 15px !important; ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? 'display: none' : null)."' title=\"".$this->text['theme-label-unpin_menu']."\"><i class='fas fa-toggle-on fa-fw'></i></a>\n";
-							$html .= "			</div>\n";
-							$html .= "		</div>\n";
-						}
-					//show the menu brand image and/or text
-						$menu_brand_image_contracted =  $_SESSION['theme']['menu_side_brand_image_contracted']['text'] != '' ? $_SESSION['theme']['menu_side_brand_image_contracted']['text'] : PROJECT_PATH."/themes/default/images/logo_side_contracted.png";
-						$menu_brand_image_expanded =  $_SESSION['theme']['menu_side_brand_image_expanded']['text'] != '' ? $_SESSION['theme']['menu_side_brand_image_expanded']['text'] : PROJECT_PATH."/themes/default/images/logo_side_expanded.png";
-						$menu_brand_text = ($_SESSION['theme']['menu_brand_text']['text'] != '') ? escape($_SESSION['theme']['menu_brand_text']['text']) : "FusionPBX";
-						if ($_SESSION['theme']['menu_brand_type']['text'] == 'image' || $_SESSION['theme']['menu_brand_type']['text'] == '') {
-							$html .= "		<a href='".PROJECT_PATH."/' style='text-decoration: none;'>";
-							$html .= 			"<img id='menu_brand_image_contracted' style='".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? "display: none;" : null)." width: 20px; margin-left: -2px; margin-top: -5px;' src='".escape($menu_brand_image_contracted)."' title=\"".escape($menu_brand_text)."\">";
-							$html .= 			"<img id='menu_brand_image_expanded' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "style='display: none;'" : null)." src='".escape($menu_brand_image_expanded)."' title=\"".escape($menu_brand_text)."\">";
-							$html .= 		"</a>\n";
-						}
-						else if ($_SESSION['theme']['menu_brand_type']['text'] == 'image_text') {
-							$html .= "		<a href='".PROJECT_PATH."/' style='text-decoration: none;'>";
-							$html .= 			"<img id='menu_brand_image_contracted' style='".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? "display: none;" : null)." width: 20px; margin-left: -2px; margin-top: -5px;' src='".escape($menu_brand_image_contracted)."' title=\"".escape($menu_brand_text)."\">";
-							$html .= 			"<span class='menu_brand_text' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "style='display: none;'" : null).">".$menu_brand_text."</span>";
-							$html .= 		"</a>\n";
-						}
-						else if ($_SESSION['theme']['menu_brand_type']['text'] == 'text') {
-							$html .= "		<a class='menu_brand_text' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "style='display: none;'" : null)." href='".PROJECT_PATH."/'>".$menu_brand_text."</a>\n";
-						}
-					$html .= "	</div>\n";
+					$html .= "		<a class='menu_side_item_main menu_side_expand' ".($_SESSION['theme']['menu_side_state']['text'] == 'expanded' ? "style='display: none';" : null)." onclick='menu_side_expand();' title=\"".$this->text['theme-label-expand_menu']."\"><i class='fas fa-bars fa-fw' style='z-index: 99800; padding-left: 1px;'></i></a>";
 				}
-
+				$html .= "	</div>\n";
 			//main menu items
 				if (is_array($menu_array) && sizeof($menu_array) != 0) {
 					foreach ($menu_array as $menu_index_main => $menu_item_main) {
@@ -1146,16 +1131,11 @@ if (!class_exists('menu')) {
 					$html .= "	<div style='height: 100px;'></div>\n";
 				}
 			$html .= "</div>\n";
-			if ($_SESSION['theme']['menu_side_state']['text'] == 'expanded') {
-				$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_expanded']['text']) ? $_SESSION['theme']['menu_side_width_expanded']['text'] : '225';
-			}
-			else {
-				$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '60';
-			}
-			$html .= "<div id='content_container' style='padding: 0; width: calc(100% - ".$content_container_width."px); float: right; padding-top: 0px; text-align: center;' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "onclick=\"if (document.getElementById('menu_side_state_current').value != 'expanded') { menu_side_contract(); }\"" : null).">\n";
+			$html .= "<div id='content_container' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "onclick=\"if ($(window).width() >= 576 && document.getElementById('menu_side_state_current').value != 'expanded') { menu_side_contract(); }\"" : null).">\n";
 			$html .= "	<div id='content_header'>\n";
 			//header: left
 				$html .= "<div class='float-left'>\n";
+				$html .= button::create(['type'=>'button','title'=>$this->text['theme-label-expand_menu'],'icon'=>'bars','class'=>'default hide-sm-up','onclick'=>'menu_side_expand();']);
 				$html .= "</div>\n";
 			//header: right
 				$html .= "<span class='float-right' style='white-space: nowrap;'>";
diff --git a/resources/footer.php b/resources/footer.php
index c0c0085201..a844824fcc 100644
--- a/resources/footer.php
+++ b/resources/footer.php
@@ -182,7 +182,8 @@
 		//build menu by style
 			switch ($_SESSION['theme']['menu_style']['text']) {
 				case 'side':
-					$container_open = "<div id='menu_side_container'>\n";
+					$menu_side_toggle = $_SESSION['theme']['menu_side_toggle']['text'] == 'hover' ? " onmouseenter=\"if ($('#menu_side_container').width() < 100) { menu_side_expand(); }\" onmouseleave=\"if ($('#menu_side_container').width() > 100 && $('#menu_side_state_current').val() != 'expanded') { menu_side_contract(); }\"" : null;
+					$container_open = "<div id='menu_side_container' class='hide-xs' ".$menu_side_toggle." >\n";
 					$menu = new menu;
 					$menu->text = $text;
 					$menu_html = $menu->menu_vertical($_SESSION['menu']['array']);
diff --git a/themes/default/app_config.php b/themes/default/app_config.php
index d98d0c4c0e..45aed46608 100644
--- a/themes/default/app_config.php
+++ b/themes/default/app_config.php
@@ -1711,6 +1711,22 @@
 		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
 		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the default state of the Side Menu: expanded (pinned) or contracted (unpinned).";
 		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "05e0318f-4344-4d40-9690-fb5cbcf20a2d";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_state_user";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Enable Side Menu toggle icon allowing users to choose their own state preference (contracted or expanded).";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "8ee8012a-da8c-483a-996d-d81b30a8bbea";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_toggle";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "hover";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether the Side Menu opens & closes with a click (focus) or by mouse over/out (hover).";
+		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "97a620e1-d7b2-4550-8648-726c3029143d";
 		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
 		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "action_bar_border_top";
diff --git a/themes/default/css.php b/themes/default/css.php
index dee6f2da7c..a88e927a1e 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -516,12 +516,22 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 		}
 
 	/* menu side logo */
+	a.menu_brand_image {
+		display: inline-block;
+		text-align: center;
+		padding: 15px 20px;
+		}
+
+	a.menu_brand_image:hover {
+		text-decoration: none;
+		}
+
 	img#menu_brand_image_contracted {
 		border: none;
 		width: auto;
-		max-height: 30px;
-		max-width: 30px;
-		margin-right: 10px;
+		max-height: 20px;
+		max-width: 20px;
+		margin-left: -1px;
 		}
 
 	img#menu_brand_image_expanded {
@@ -529,18 +539,19 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 		height: auto;
 		max-width: 145px;
 		max-height: 35px;
-		margin-top: -3px;
-		margin-left: -6px;
+		margin-left: -7px;
 		}
 
 	/* menu brand text */
-	.menu_brand_text {
+	a.menu_brand_text {
+		display: inline-block;
+		padding: 10px 20px;
 		color: <?php echo ($_SESSION['theme']['menu_brand_text_color']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color']['text'] : 'rgba(255,255,255,0.80)'; ?>;
 		font-weight: 600;
 		white-space: nowrap;
 		}
 
-	.menu_brand_text:hover {
+	a.menu_brand_text:hover {
 		color: <?php echo ($_SESSION['theme']['menu_brand_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color_hover']['text'] : 'rgba(255,255,255,1.0)'; ?>;
 		text-decoration: none;
 		}
@@ -574,7 +585,6 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 
 	div#menu_side_container > a.menu_side_item_main,
 	div#menu_side_container > div > a.menu_side_item_main,
-	div#menu_side_container > div#menu_side_brand_container a.menu_side_item_main,
 	div#menu_side_container > div#menu_side_control_container a.menu_side_item_main {
 		display: block;
 		width: 100%;
@@ -594,10 +604,7 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 	div#menu_side_container > div > a.menu_side_item_main:active,
 	div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:hover,
 	div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:focus,
-	div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:active,
-	div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:hover,
-	div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:focus,
-	div#menu_side_container > div#menu_side_brand_container > div a.menu_side_item_main:active {
+	div#menu_side_container > div#menu_side_control_container > div a.menu_side_item_main:active {
 		color: <?php echo ($_SESSION['theme']['menu_main_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_text_color_hover']['text'] : '#fd9c03'; ?>;
 		background: <?php echo ($_SESSION['theme']['menu_main_background_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_background_color_hover']['text'] : 'rgba(0,0,0,1.0)'; ?>;
 		text-decoration: none;
@@ -615,6 +622,12 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 		cursor: pointer;
 		}
 
+	@media (max-width: 575.98px) {
+		a.menu_side_item_sub {
+			padding: 8px 20px 8px 45px;
+			}
+	}
+
 	a.menu_side_item_sub:hover,
 	a.menu_side_item_sub:focus,
 	a.menu_side_item_sub:active {
@@ -628,6 +641,32 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 		cursor: pointer;
 		}
 
+	div#content_container {
+		padding: 0;
+		padding-top: 0px;
+		text-align: center;
+		}
+
+	@media (max-width: 575.98px) {
+		div#content_container {
+			width: 100%;
+			}
+	}
+	@media (min-width: 576px) {
+		div#content_container {
+			<?php
+			if ($_SESSION['theme']['menu_side_state']['text'] == 'expanded') {
+				$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_expanded']['text']) ? $_SESSION['theme']['menu_side_width_expanded']['text'] : '225';
+			}
+			else {
+				$content_container_width = is_numeric($_SESSION['theme']['menu_side_width_contracted']['text']) ? $_SESSION['theme']['menu_side_width_contracted']['text'] : '60';
+			}
+			?>
+			width: calc(100% - <?php echo $content_container_width; ?>px);
+			float: right;
+			}
+	}
+
 /* BUTTONS ********************************************************************/
 
 	/* buttons */
diff --git a/themes/default/template.php b/themes/default/template.php
index d8dee8ef59..98ec3785f4 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -12,7 +12,7 @@
 <meta charset='utf-8'>
 <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-<meta name='viewport' content='width=device-width, initial-scale=1'>
+<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
 
 {*//external css files *}
 	<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap.min.css.php'>
@@ -102,17 +102,22 @@
 							{/literal}
 						{else if $settings.theme.menu_brand_type == 'text'}
 							{literal}
-							$('.menu_brand_text').fadeOut(180);
+							$('.menu_brand_text').hide();
 							{/literal}
 						{/if}
 						{literal}
-						$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_contracted}{literal}px' }, 250);
-						$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_contracted}{literal} }, 250, function() {
+						$('.menu_side_control_state').hide();
+						$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_contracted}{literal}px' }, 180, function() {
 							menu_side_state_current = 'contracted';
 						});
-
+						if ($(window).width() >= 576) {
+							$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_contracted}{literal} }, 250);
+						}
 						$('.menu_side_contract').hide();
 						$('.menu_side_expand').show();
+						if ($(window).width() < 576) {
+							$('#menu_side_container').hide();
+						}
 					}
 				}
 
@@ -129,12 +134,11 @@
 							{/literal}
 						{/if}
 						{literal}
-						$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px' }, 250, function() {
-							$('.menu_side_contract').fadeIn(180);
-						});
-						$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_expanded}{literal} }, 250, function() {
-							$('.menu_brand_text').fadeIn(180);
-							$('.menu_side_item_title').fadeIn(180);
+						$('.menu_side_expand').hide();
+						$('.menu_side_contract').show();
+						$('#menu_side_container').show();
+						var menu_side_container_width = $(window).width() < 576 ? $(window).width() : '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px';
+						$('#menu_side_container').animate({ width: menu_side_container_width }, 180, function() {
 							{/literal}
 							{if $settings.theme.menu_brand_type == 'image' || $settings.theme.menu_brand_type == ''}
 								{literal}
@@ -142,9 +146,15 @@
 								{/literal}
 							{/if}
 							{literal}
-							menu_side_state_current = 'expanded';
+							$('.menu_side_control_state').fadeIn(180);
+							$('.menu_brand_text').fadeIn(180);
+							$('.menu_side_item_title').fadeIn(180, function() {
+								menu_side_state_current = 'expanded';
+							});
 						});
-						$('.menu_side_expand').hide();
+						if ($(window).width() >= 576) {
+							$('#content_container').animate({ width: $(window).width() - {/literal}{$settings.theme.menu_side_width_expanded}{literal} }, 250);
+						}
 					}
 				}
 
@@ -561,7 +571,27 @@
 			{if $settings.theme.menu_style == 'side'}
 				{literal}
 				$(window).on('resizeEnd', function() {
-					$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 200);
+					if ($(window).width() < 576) {
+						if (menu_side_state_current == 'contracted') {
+							$('#menu_side_container').hide();
+						}
+						if (menu_side_state_current == 'expanded') {
+							$('#menu_side_container').show();
+							$('#menu_side_container').animate({ width: $(window).width() }, 180);
+						}
+						$('#content_container').animate({ width: $(window).width() }, 100);
+					}
+					else {
+						$('#menu_side_container').show();
+						if (menu_side_state_current == 'expanded') {
+							$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_expanded}{literal}px' }, 180, function() {
+								$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 100);
+							});
+						}
+						else {
+							$('#content_container').animate({ width: $(window).width() - $('#menu_side_container').width() }, 100);
+						}
+					}
 				});
 				{/literal}
 			{/if}
@@ -933,7 +963,7 @@
 				{if $settings.theme.menu_style == 'inline'}{$logo}{/if}
 				{$menu}
 				{if $settings.theme.menu_style == 'inline' || $settings.theme.menu_style == 'static'}<br />{/if}
-				{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value=''>{/if}
+				{if $settings.theme.menu_style == 'side'}<input type='hidden' id='menu_side_state_current' value='{$menu_side_state}'>{/if}
 			{else} {*//default: fixed *}
 				{$menu}
 				{$container_open}