У меня проблема с моей боковой панелью. Я хочу скрыть заголовок lo go, когда боковая панель свернута, и показать, когда боковая панель развернута. Теперь я использую эффект постепенного появления и затухания jQuery, чтобы добиться этого. Однако при раскрытии боковой панели элемент меню HOME сдвигается снизу вверх, что выглядит не очень хорошо.
Я предполагаю, что заголовок lo go занимает место над HOME и когда нажата кнопка переключения боковой панели, заголовок перемещается вверх рядом с lo go и HOME скользит вверх.
Как добиться плавного эффекта скрытия / отображения при сворачивании / расширении боковая панель без влияния на другие элементы?
Вот ссылка на полный код с реальной проблемой: Codepen
Вот пример кода, который я пробовал:
HTML
<nav id="sidebar" class="active">
<h1>
<a href="index.html" class="logo"><span class="fas fa-globe-americas"></span> <span class="logo-title">villa</span></a>
</h1>
<ul class="list-unstyled components mb-5">
<li>
<a href="#"><span class="fa fa-home"></span> Home</a>
</li>
</ul>
</nav>
jQUery
(function($) {
"use strict";
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
if($('#sidebar').hasClass('active')) {
$('#sidebar .logo .logo-title').fadeOut(1);
}else{
$('#sidebar .logo .logo-title').fadeIn(1000);
}
});
})(jQuery);