Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Modify Side Menu Color Scheme


I'm currently working with Metronic8/demo42 and exploring ways to customize the global color scheme of the sidebar menu. My focus is on altering the background color of the sidebar and changing the default and hover colors of its menu items font. I've examined the "Global Stylesheet" (/css/style.bundle.css) but haven't been able to locate the sections for these specific modifications. Ideally, I'm looking to adjust the sidebar's color palette through the classes of various elements, such as 'app-sidebar-menu'. Could you advise on whether this approach is feasible, or suggest a simpler method to achieve this customization?


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

Customizing Metronic sidebars can definitely feel harder than it should because a lot of the styles are tied into the theme variables and generated bundles instead of being obvious inside style.bundle.css. Your approach using classes like app-sidebar-menu is valid, but in most cases it’s cleaner to override the specific sidebar variables or add custom CSS after the bundle loads rather than editing the bundle directly.

For example, targeting classes like .app-sidebar, .menu-link, .menu-title, and their hover/active states usually gives more control without breaking future updates. One thing I learned working with admin dashboards is that small sidebar color adjustments can completely change the UX feel of a panel, especially for menu readability and navigation flow.

I recently came across a menu site that actually had a really clean sidebar and category structure for browsing trays, burgers, and milkshakes. The hierarchy and hover states felt surprisingly polished for a food menu site, which is a good reminder that navigation styling matters a lot more than people think.


Modifying the side menu color scheme can completely change the look and feel of a website, making it more attractive, easier to read, and better aligned with your brand identity. The right colors improve user experience by guiding attention and making navigation smoother. A well-presented Cookout menu with prices uses a clear layout and readability to help customers quickly browse items like burgers, BBQ, chicken, sides, and milkshakes, making the whole selection process simple and visually appealing.



The information is very useful, arranged logically so it is easy to follow. This is definitely good content, which can become a long-term reference document for many people.



Sprunki Mode - Play Online Incredibox Mod offers a fresh twist on digital music creation, featuring quirky characters, lively sounds, and colorful visuals. It’s a great platform for users of all abilities to explore rhythm, melody, and composition in an engaging way.​​​​​​​ Sprunki Mode



Hi,

You will need to use SASS in src/sass/layout/_variables.custom.scss to edit the layout styles and 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, Sean


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