Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

demo7 Sidebar issues


Default to open. I want to default to closed. How to implement this


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(