Responsive menu fix

Question

Please view it on full screen. Whenever I click on menu arrow to minimize it, I want the text from menu and logo text to dissapear. I just want to leave the icons and make them centered. What would be best approach to do this? I have tried using style display none for one menu and adding another one but there is no transition when adding display property.

 function smallNav() { let menu = document.getElementById('sidebar-container'); menu.style.width = "5rem"; }

 .router-link-active { background-color: #2b445f; font-weight: 700; border-left: 3px solid #1089ff; } #right, .left { cursor: pointer; } #sidebar-container { min-height: 100vh; transition: 400ms; bottom: 0; width: 18rem; background: #23374d; } #sidebar-small { min-height: 100vh; transition: 400ms; bottom: 0; width: 0px; background: #23374d; } #sidebar-container .logo { padding: 20px; } .menuicon { font-size: 24px; } .menu { transition: 200ms; } .menu a { color: white; } .btn-search { right: 5px; } .left { color: white; font-size: 24px; } .avatar { max-width: 43px; } .menu a { padding: 10px; width: 100%; } .menu a:hover { background-color: #2b445f; } ion-icon { font-size: 24px; color: #fff !important; } @media (max-width: 768px) { #sidebar-container { display: none; } #mobile { display: flex !important; flex-direction: column; text-align: left; } #mobile li { padding: 20px; } .btn-search { bottom: 0; } }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <div> <div class="d-flex"> <div class="bg-primary text-left" id="sidebar-container"> <div class="logo p-3 d-flex justify-content-between align-items-center"> <h4 class="text-white">Company Name</h4> <div class="i fas fa-chevron-circle-left left" id="left" onClick="smallNav()"></div> </div> <div class="menu d-flex flex-column"> <router-link class="nav-link mt-4 d-flex py-3" :to="{name: 'Home'}" exact="true"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"> </i>Home</div> </router-link> <router-link class="nav-link text-white py-3" :to="{name: 'About'}"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"></i>Plan </div> </router-link> </div> </div> <div class="w-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid pl-0 pr-0"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <form class="form-inline my-2 position-relative d-inline-block"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn position-absolute btn-search" type="submit"><i class="fas fa-search"> </i></button> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle d-flex align-items-center" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="avatar mr-2 img-fluid" src="https://www.kindpng.com/picc/m/464-4644512_circle-avatar-picture-png-transparent-png.png" />Jan Kowalski</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Mój profil</a><a class="dropdown-item" href="#">Subskrypcja</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Wyloguj</a> </div> </li> <div class="d-none" id="mobile"> <li class="nav-item"></li>Home <li class="nav-item"></li>About <li class="nav-item"></li>About </div> </ul> </div> </div> </nav> </div> </div> </div>

Answer 1

You can change your source like below. Your CSS doesn't change, but I added some change in your HTML tags and js code.

 function smallNav() { let menu = document.getElementById('sidebar-container'); menu.style.width = "4rem"; document.getElementById('logo-name').hidden = true; for(i=0; document.getElementsByClassName('menu-title').length - 1; i++) document.getElementsByClassName('menu-title').item(i).hidden = true; }

 <div> <div class="d-flex"> <div class="bg-primary text-left" id="sidebar-container"> <div class="logo p-3 d-flex justify-content-between align-items-center"> <h4 class="text-white" id="logo-name">Company Name</h4> <div class="i fas fa-chevron-circle-left left" id="left" onClick="smallNav()"></div> </div> <div class="menu d-flex flex-column"> <router-link class="nav-link mt-4 d-flex py-3" :to="{name: 'Home'}" exact="true"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"> </i><span class="menu-title">Home</span></div> </router-link> <router-link class="nav-link text-white py-3" :to="{name: 'About'}"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"></i><span class="menu-title">Plan</span> </div> </router-link> </div> </div> <div class="w-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid pl-0 pr-0"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <form class="form-inline my-2 position-relative d-inline-block"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn position-absolute btn-search" type="submit"><i class="fas fa-search"> </i></button> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle d-flex align-items-center" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="avatar mr-2 img-fluid" src="https://www.kindpng.com/picc/m/464-4644512_circle-avatar-picture-png-transparent-png.png" />Jan Kowalski</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Mój profil</a><a class="dropdown-item" href="#">Subskrypcja</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Wyloguj</a> </div> </li> <div class="d-none" id="mobile"> <li class="nav-item"></li>Home <li class="nav-item"></li>About <li class="nav-item"></li>About </div> </ul> </div> </div> </nav> </div> </div> </div>