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

Metronic v8 - side nav menu scroll


Hi

When the side navigation menu contains many items, the menu doesn't seem to scroll by default - we have to click a menu item first, and then the scroll works.

How do we set the side menu to scroll by default ?

thanks
VR


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 (7)


Hi,

May I know which Metronic version and demo are you using? Metronic demos have an auto scroll feature for the sidebar menus. You can check it for the demo 1 sidebar menu here.

Regards.



8.0.19 - side menu does not auto-scroll

<div class="aside" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:"200px", "300px": "250px"}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_aside_mobile_toggle">



Hi,


Please replace the src/js/layout/aside.js with this version

Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Regards.



Hi

Thanks. I'm nervous to recompile the assets folder - but have located the script location within scripts.bundle.js

Have replaced with the code provided, but to no effect - side nav menu still does not auto scroll on mobile - it requires the users to first click a menu item and then scroll works.



Can you clarify, auto-scroll to the active menu link? The code I provided is to auto scroll to the menu active link on page load.



Updated - To clarify, I should say 'will not auto-scroll when on mobile device'
thanks
VR


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  :(