demo7 Sidebar issues
Default to open. I want to default to closed. How to implement this
Replies (12)
Hi,
You can add data-kt-aside-minimize="on" to the body tag and active class to the toggle element with kt_aside_toggle id.
Regards.
Thank you very much. Can I ask a question on ‘ kt_ Aside_ footer ’ The menu under the is displayed in the sidebar. I have now copied the original DIV, but it does not work. It is displayed under the original category, and its original content is not hidden
Hi,
Could you please provide more details? What are you trying to customize ?
Regards.
I want to implement Tab content under kt_aside_footer
Hi,
This is a major change in the layout and without a full design/structure concept we can not provide a guide
Can you draw it somehow or explain it in more detail and then we will try to guide you further?
Regards.
<div class="aside-nav d-flex flex-column align-items-center flex-column-fluid w-100 pt-5 pt-lg-0" Id="kt_aside_nav" >
<div class="hover-scroll-overlay-y mb-5 px-5 " data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_aside_nav" data-kt-scroll-dependencies="#kt_aside_logo, #kt_aside_footer" data-kt-scroll-offset="0px">
<ul class="nav flex-column w-100" Id="kt_aside_nav_tabs">
<li class="nav-item mb-2" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="menu">
<a class="nav-link btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light" data-bs-toggle="tab" href="#kt_aside_tab_menu">
<i class="ki-duotone ki-element-11 fs-2x">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</i>
</a>
</div>
</div>
----------------------------------------------------------
<div class="aside-footer d-flex flex-column align-items-center flex-column-auto" Id="kt_aside_footer">
<div class="hover-scroll-overlay-y mb-5 px-5 " data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_aside_footer" data-kt-scroll-dependencies="#kt_aside_logo, #kt_aside_nav" data-kt-scroll-offset="0px">
<ul class="nav flex-column w-100" Id="kt_aside_nav_tabs" >
<li class="nav-item mb-2" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="shop">
<a class="nav-link btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light" data-bs-toggle="tab" href="#kt_aside_tab_shop">
<i class="ki-duotone ki-handcart fs-2 fs-lg-1"></i>
</a>
</div>
</div>
------------------------------------------------
<div class="aside-secondary d-flex flex-row-fluid">
<div class="aside-workspace my-5 p-5" >
<div class="d-flex h-100 flex-column">
<div class="flex-column-fluid hover-scroll-y" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_aside_wordspace" data-kt-scroll-dependencies="#kt_aside_secondary_footer" data-kt-scroll-offset="0px">
<div class="tab-content">
<div class="tab-pane fade " Id="kt_aside_tab_menu" role="tabpanel">
<div class="menu-item">
<div class="menu-content pb-2">
<span class="menu-section text-muted text-uppercase fs-8 ls-1">MENU</span>
</div>
</div>
</div>
<div class="tab-pane fade" Id="kt_aside_tab_shop" role="tabpanel">
<div class="mx-5">
<div class="menu-item">
<div class="menu-content pb-2">
<span class="menu-section text-muted text-uppercase fs-8 ls-1">SHOP</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>------------------------------------------------
Problem with switching between displaying and hiding content
Hi,
We could not reproduce the issue using your provided code. Can you please deploy your page to your test server and send us the test URL in a private reply? We will need to check your code from your environment.
Regards.
Hi, the content switching display in this sidebar has been resolved. Now, there is a problem with clicking on the navigation link to switch colors. I am sending you the URL. Are you looking at it?
Hi,
It looks like the active tab's bg color is being changed upon the content switch. I suppose you resolved it? Or the issue is something else?
Regards.
The color of the navigation link has not changed. I am clicking on the shopping cart below, and the menu above is still green. It should be gray. I am not sure how to handle this issue. Can CSS or JS be used to solve this problem
Hi,
Thank you for the details. Noted, we will check it further and let you know once we find any workaround as soon as possible.
Regards.
Hi,
Hope you are doing well.
As we checked your app's latest version the tab's active state looks working fine. Can you confirm if you have fixed it?
Regards.
