diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index d3d768d09e..37d4684062 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -5746,20 +5746,6 @@ footer{
     box-shadow: 0 1px 3px #C8C8C8;
     border: 1px solid #e6e6e6;
 }
-#toolnav{
-    position: fixed;
-    left: 0;
-    top: 50px;
-    z-index: 2000;
-}
-#toolnavbox ul{
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-#toolnavbox ul li{
-    height: 40px;
-}
 .everybodyview{
     padding-top: 20px;
     margin-top: 10px;
@@ -5767,23 +5753,62 @@ footer{
 .btn-options{
     padding-right: 20px;
 }
-#toolnavbox ul li a {
-	display: inline-block;
-    margin: 0;
-	color:#fff;
-	padding: 7px;
-	text-decoration: none;
-	-webkit-transition:all 500ms ease;
-	-o-transition:all 500ms ease;
-    transition:all 500ms ease;
-    width: 38px
-}
-#toolnavbox ul li a:hover {
-	padding: 5px 10px;
-}
 .btn-tool{
     margin-bottom: 2px;
 }
+ul#toolnavbox {
+    position: fixed;
+    margin: 0px;
+    padding: 0px;
+    top: 10px;
+    left: 0px;
+    list-style: none;
+    z-index:9999;
+}
+ul#toolnavbox li {
+    width: 200px;
+}
+ul#toolnavbox li a {
+    display: block;
+    margin-left: -2px;
+    font-size: 12px;
+    width: 200px;
+    height: 35px;
+}
+ul#toolnavbox .tool-img{
+    float: left;
+    margin-right: 5px;
+}
+ul#toolnavbox li a.btn{
+    text-align: left !important;
+}
+
+ul#toolnavbox-two {
+    position: fixed;
+    margin: 0px;
+    padding: 0px;
+    top: 10px;
+    left: 0px;
+    list-style: none;
+    z-index:9999;
+}
+ul#toolnavbox-two li {
+    width: 50px;
+}
+ul#toolnavbox-two li a {
+    display: block;
+    margin-left: -2px;
+    font-size: 12px;
+    width: 50px;
+    
+}
+ul#toolnavbox-two .tool-img{
+    float: left;
+    margin-right: 5px;
+}
+ul#toolnavbox-two li a.btn{
+    text-align: left !important;
+}
 /* CSS BACKUP *****/
 .elfinder-cwd-filename {
     color: black !important;
diff --git a/main/inc/lib/course_home.lib.php b/main/inc/lib/course_home.lib.php
index 106bb22df7..afe34ebac3 100755
--- a/main/inc/lib/course_home.lib.php
+++ b/main/inc/lib/course_home.lib.php
@@ -1171,14 +1171,24 @@ class CourseHome
         $navigation_items = self::get_navigation_items(true);
         $course_id = api_get_course_id();
 
-        $html = '<div id="toolnav">'
-                . '<div class="btn-tool">'
-                . '<a class="btn btn-default" href="javascript: void(0);" id="swap_menu_link" onclick="javascript: swap_menu();">'.Display::returnFontAwesomeIcon('bars').'</a></div>';
+        $html = '<div id="toolnav">';
         if (api_get_setting('show_navigation_menu') == 'icons') {
             $html .= self::show_navigation_tool_shortcuts($orientation = SHORTCUTS_VERTICAL);
         } else {
-            $html .= '<div id="toolnavbox">';
-            $html .= '<ul>';
+            $html .= '<script>$(function() {
+                $("#toolnavbox a").stop().animate({"margin-left":"-185px"},1000);
+                $("#toolnavbox > li").hover(
+                    function () {
+                        $("a",$(this)).stop().animate({"margin-left":"-2px"},200);
+                        $("span",$(this)).css("display","block");
+                    },
+                    function () {
+                        $("a",$(this)).stop().animate({"margin-left":"-185px"},200);
+                        $("span",$(this)).css("display","initial");
+                    }
+                );
+            });</script>';
+            $html .= '<ul id="toolnavbox">';
             $count = 0;
             foreach ($navigation_items as $key => $navigation_item) {
                 //students can't see the course settings option
@@ -1193,9 +1203,9 @@ class CourseHome
                 if (strpos($navigation_item['link'], 'chat') !== false &&
                     api_get_course_setting('allow_open_chat_window', $course_id)
                 ) {
-                    $html .= '<a class="btn btn-default" href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
+                    $html .= '<a class="btn btn-default text-left" href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
                 } else {
-                    $html .= '<a class="btn btn-default" href="'.$navigation_item['link'].'" target="_top" ';
+                    $html .= '<a class="btn btn-default text-left" href="'.$navigation_item['link'].'" target="_top" ';
                 }
 
                 if (stristr($url_item['path'], $url_current['path'])) {
@@ -1205,17 +1215,18 @@ class CourseHome
                 }
                 $html .= ' title="'.$navigation_item['name'].'">';
                 if (api_get_setting('show_navigation_menu') != 'text') {
-                    $html .= '<div class="pull-left">'.Display::return_icon(substr($navigation_item['image'],0,-3)."png", $navigation_item['name'], array('class'=>'tool-img'), ICON_SIZE_SMALL).'</div>';
+                    $html .= Display::return_icon(substr($navigation_item['image'],0,-3)."png", $navigation_item['name'], array('class'=>'tool-img'), ICON_SIZE_SMALL);
                 }
                 if (api_get_setting('show_navigation_menu') != 'icons') {
-                    $html .= '<span class="tool-text-'.$count.'">'.$navigation_item['name'].'</span>';
+                    $html .= '<span class="tool-text">'.$navigation_item['name'].'</span>';
                 }
                 $html .= '</a>';
                 $html .= '</li>';
             }
-            $html .= '</ul></div>';
+            $html .= '</ul>';
         }
-        $html .= '</div><!-- end "#toolnav" -->';
+        $html .= '</div>';
+        
 
         return $html;
     }
@@ -1226,37 +1237,46 @@ class CourseHome
     public static function show_navigation_tool_shortcuts($orientation = SHORTCUTS_HORIZONTAL)
     {
         $navigation_items = self::get_navigation_items(false);
-        $html = '';
+        
         if (!empty($navigation_items)) {
-            if ($orientation == SHORTCUTS_HORIZONTAL) {
+            /* if ($orientation == SHORTCUTS_HORIZONTAL) {
                 $style_id = "toolshortcuts_horizontal";
             } else {
                 $style_id = "toolshortcuts_vertical";
-            }
-            $html .= '<div id="'.$style_id.'">';
+            } */
+            $html .= '<script>$(function() {
+                $("#toolnavbox-two a").stop().animate({"margin-left":"-35px"},1000);
+                $("#toolnavbox-two > li").hover(
+                    function () {
+                        $("a",$(this)).stop().animate({"margin-left":"-2px"},200);
+                    },
+                    function () {
+                        $("a",$(this)).stop().animate({"margin-left":"-35x"},200);
+                    }
+                );
+            });</script>';
+            $html .= '<ul id="toolnavbox-two">';
             foreach ($navigation_items as $key => $navigation_item) {
+                $html .= '<li>';
                 if (strpos($navigation_item['link'], 'chat') !== false &&
                     api_get_course_setting('allow_open_chat_window')
                 ) {
-                    $html .= '<a class="items-icon" href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
+                    $html .= '<a class="btn btn-default" href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
                 } else {
-                    $html .= '<a class="items-icon" href="'.$navigation_item['link'].'"';
+                    $html .= '<a class="btn btn-default" href="'.$navigation_item['link'].'"';
                 }
                 if (strpos(api_get_self(), $navigation_item['link']) !== false) {
                     $html .= ' id="here"';
                 }
                 $html .= ' target="_top" title="'.$navigation_item['name'].'">';
-                $html .= Display::return_icon(substr($navigation_item['image'],0,-3)."png", $navigation_item['name'], null, ICON_SIZE_MEDIUM);
+                $html .= Display::return_icon(substr($navigation_item['image'],0,-3)."png", $navigation_item['name'], null, ICON_SIZE_SMALL);
                 //$html .= '<img src="'.api_get_path(WEB_IMG_PATH).$navigation_item['image'].'" alt="'.$navigation_item['name'].'"/>';
                 $html .= '</a> ';
-                if ($orientation == SHORTCUTS_VERTICAL) {
-                    $html .= '<br />';
-                }
+                
+                $html .= '</li>';
             }
-            $html .= '</div>';
-
+            $html .= '</ul>';
         }
-
         return $html;
     }
 
diff --git a/main/template/default/layout/course_navigation.tpl b/main/template/default/layout/course_navigation.tpl
index b09c1af9a9..dd02f49731 100755
--- a/main/template/default/layout/course_navigation.tpl
+++ b/main/template/default/layout/course_navigation.tpl
@@ -9,13 +9,6 @@
 
     {% if show_course_navigation_menu is not null %}
         <script>
-            $(document).ready( function() {
-                if (readCookie('menu_state') == 0) {
-                    swap_menu();
-                }
-
-              
-            });
             function createCookie(name, value, days) {
                 if (days) {
                     var date = new Date();
@@ -36,27 +29,7 @@
                 }
                 return null;
             }
-            function swap_menu() {
-                toolnavlist_el = document.getElementById('toolnavbox');
-                center_el = document.getElementById('center');
-                swap_menu_link_el = document.getElementById('swap_menu_link');
-
-                if (toolnavlist_el.style.display == 'none') {
-                    toolnavlist_el.style.display = '';
-                    if (center_el) {
-                        center_el.style.margin = '0 190px 0 0';
-                    }
-                    swap_menu_link_el.innerHTML = '<i class="fa fa-bars" aria-hidden="true"></i>';
-                    createCookie('menu_state',1,10);
-                } else {
-                    toolnavlist_el.style.display = 'none';
-                    if (center_el) {
-                        center_el.style.margin = '0 0 0 0';
-                    }
-                    swap_menu_link_el.innerHTML = '<i class="fa fa-bars" aria-hidden="true"></i>';
-                    createCookie('menu_state',0,10);
-                }
-            }
+            
         </script>
     {{ show_course_navigation_menu }}
     {% endif %}