Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

The side menu is not showing correctly on mobile view n hover the side bar menu


im using v8.1.5 metronics Angular project , in side bar when hover in the sidebar menu screens(components) are showing ugly in the mobile view is not showing sidebar , and yes i saw latest version of metronics angular project its working ok , may i know how can i solve this issue in v8.1.5 metronics angular project ..


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


It seems like the issue you're facing with the side menu in Metronic Angular v8.1.5 is related to compatibility or changes in the HTML code structure between versions, not just in styles level only.

Compare the HTML code of the side menu between the version that works (latest version) and the version you are using (v8.1.5). Look for any differences in the structure, classes, or styles related to the side menu and mobile view.

If possible and feasible for your project, consider upgrading to a newer version of Metronic Angular that resolves the compatibility issues and includes improvements or fixes related to the side menu.

Thanks



You may use online image hosting to share your image.

http://imgbb.com

Thanks



Thank you Faizal , please check the attached snap below and also we are getting these error when we replace the latest sass folder to our project (v8.1.5) , please check once.

thank you.


https://ibb.co/9TqKXgh


error:

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: $color2: var(--bs-gray-900) is not a color.
â•·
212 │ @return mix(black, $color, $weight);



To resolve the issue, you can try updating the core assets. Follow these steps:

1. Obtain the latest version of Metronic Angular.

2. Navigate to the `/src/assets/sass` directory in the latest version.

3. Replace the corresponding files in your v8.1.5 project with the ones from the latest version.

This should update the styles and assets, potentially addressing the layout issues you're facing. Remember to clear any cached assets and refresh your application to see the changes.

If you encounter any difficulties or have further questions, feel free to ask for additional assistance.



i folowed Your steps faizal

step1: downloaded angular metronics v8.2.1
step2: in v8.2.1 project taken the src/assets/sass/ folder replaced in the our project (v8.1.5) and YES i clear the cached asstes and hard refreshed it .

still is showing same response , i think here there is no option to upload image if it is here please let me know i will send u the screen shot ,

issue is only in mobile view sidebar menu section is not showing correctly..
list like this

dashboard
retails
.member
.coupon
.loyalty plan and so on


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