diff --git a/js/navbar.js b/js/navbar.js
index 30ae030..fc4a01e 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -10,10 +10,12 @@ function sidebarOpen() {
   document.getElementById("sidebar").style.width = "50%";
   document.getElementById("sidebar_open_short").style.display = "none";
   document.getElementById("sidebar_close_short").style.display = "block";
+  document.getElementById("sidebar_social").style.display = "flex";
 }
 
 function sidebarClose() {
   document.getElementById("sidebar").style.width = "0%"
   document.getElementById("sidebar_open_short").style.display = "block";
   document.getElementById("sidebar_close_short").style.display = "none";
+  document.getElementById("sidebar_social").style.display = "none";
 }
\ No newline at end of file
diff --git a/style/new_style.css b/style/new_style.css
index cf69a3f..b9ee524 100644
--- a/style/new_style.css
+++ b/style/new_style.css
@@ -127,6 +127,7 @@ body {
     color: var(--link-color);
     display: block;
     white-space: nowrap;
+    transition: 0.5s;
   }
 @media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}}
 #sidebar a:hover {color: var(--main-text-color)}
@@ -139,7 +140,7 @@ body {
 }
 #sidebar_social {
     position: absolute;
-    display: flex;
+    display: none;
     bottom: 50px;
     width: 100%;
     margin: auto;
@@ -148,9 +149,9 @@ body {
 #sidebar_social img {
     width: 12vw;
     max-width: 50px;
-    transition: 0.2s;
+    transition: 0.5s;
 }
-@media screen and (min-height: 600px){#sidebar_social img{margin-bottom:10px}}
+@media screen and (min-height: 600px){#sidebar_social img{margin-bottom:20px}}
 @media screen and (max-height: 360px){#sidebar_social img{display:none}}
 /* CONTENT */
 .content { /* Try z-index: 1; so it scrolls over header image */