Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Metronic 8.1.6 - Demo 1 Menu Icon Bug


In 8.1.6, when you use the Dark Sidebar, you cannot follow the instructions here to change MenuItem icon colors without changes to the core SCSS.

_sidebar-dark.scss would appear to control the colors, so after much digging, setting $icon-color to null on Line 39 should have done the trick... but it didn't.

After wanting to flip my desk over for about 45 minutes, I started searching for $icon-color elsewhere in the project. It turns out that setting $icon-color to null on line 33 of _header-dark.scss is what allowed the .menu-icon-primary class to take over.

I believe this should be corrected so that the css options on Menu can be properly implemented. Right now the extra CSS in the theme seems unnecessary if you can just set color options on the menu container... and the theme clearly has no problem applying extensive class options elsewhere.


user
Robert McLaws 3 years ago
Metronic SASS
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Sean Author 3 years ago

Hi Robert,

Thank you for your feedback on this. We will check it further and apply the necessary code improvements.

In your case, It turns out that setting $icon-color to null is the right since the customization by _sidebar-dark.scss overrides the default menu state color options.

In the near future, we will be doing significant improvements based on the new Figma Design system to optimize the HTML and CSS file size.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(