Customizing Metronic Theme for Responsive Layout
need assistance with customizing the layout for responsive design.
Metronic Version:8.2.7
Demo theme : 4
Framework: HTML
Specific Requirements:
- Fixed Sidebar and Header: I want the sidebar and header to remain fixed and sticky regardless of the device width.
- Responsive Container: The content container should be responsive and adjust its width based on the device screen size. It should not shrink below a certain width (e.g., 1200px) but can expand to fill the available space if the device width is greater than 1200px.
Current Approach:
I've attempted to modify the media queries in the layout SASS folder files to achieve this, but without success. As a workaround, I've created a separate CSS file containing the necessary custom CSS rules with partial success. Before continuing this process want to get confirmation whether this is the only way to achieve my needs. The default theme supports my requirement if so could you explain.
Question:
SCSS Integration: Where should I place this custom CSS file within the SASS folder structure so that it's included in the bundled CSS?
Additional Request:
If it's possible to achieve this customization using existing Metronic files and configurations, please provide a step-by-step guide.
Replies (3)
Hi,
We have tried to do these changes without using SASS but it got quite complicated.
Are you able to use the build tools to modify it via SASS we could give you some directions so you could make the changes on your end and achieve it as per your requirements.
Advanced customization should be done using SASS, and the CSS should be rebuilt using gulp in your development environment only. For prod deployment, you still can use our newly regenerated CSS.
In the meantime please install the required build tools and give them a try:
https://preview.keenthemes.com/html/metronic/docs/getting-started/setup
Also please double confirm, do you need to disable the responsiveness and keep the UI for the desktop with at least 1200px width?
Regards.
Hi,
Could you please let us know which demo you are using? Are you using Bootstrap 5 and JavaScript or the Angular version of Metronic 8? I saw your previous cases mentioned the Angular version.
Regards,
Sean
Metronic Version:8.2.7
Demo theme : 4
Framework: HTML
For your reference - https://preview.keenthemes.com/metronic8/demo4/index.html
I want to change this theme to the above specified requirement. I am trying with custom CSS approach, but want to achieve this in existing SCSS code, if you guide me through it will be big help.
also for your information, I bought Metronic template again yesterday to get premium support. I had sent the license details along with query in email also
Note. I had checked all the 64 demos none of them meet my needs. It will be good in future if you could provide a fixed sidebar & header options for all devices and only the container should be responsive
