New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Sidebar menu on Laravel


The menu sidebar isn't working properly in the Laravel version.
After it collapses, when it expands, it stays below the text and doesn't return to its original position without allowing the arrow to be clicked.

How can I fix this?


Text formatting options
Submit

Replies (7)


You're very welcome! I'm glad I could help.
If you encounter any other issues, feel free to ask.

Thanks



Perfect

Thank you very much for your attention and response.



Hi

The issue is related to the z-index values in your Metronic Laravel setup. Here's how to fix it:

You need to modify the z-index values in the SCSS variables file. resources/_keenthemes/src/sass/layout/_variables.custom.scss

Update the z-index values to ensure proper layering.


// Header fixed - keep current value
$app-header-fixed-z-index: 100;
$app-header-fixed-z-index-mobile: 100;

// Sidebar fixed - increase to appear above the eader
$app-sidebar-fixed-z-index: 120; // Changed from 110 to 120
$app-sidebar-sticky-z-index: 120; // Changed from 110 to 120



npm run build
# or
npm run dev



Hi,

We will check the issue and fix it.

Thank you



In this version

https://preview.keenthemes.com/metronic8/demo1/index.html

if you don´t scroll screen, when you toggle the sidebar it appears behind the top menu
but if you scroll screen, works properly.



it seems the position or z-index is wrong, or the toggle isn’t working properly. Open it in browser inspect tools, adjust the styles a bit, and it should be fixed.



Hi

Sorry for the delay. May I know if you use Laravel Metronic v8 or v9?

Thanks


Text formatting options
Submit
Text formatting options
Submit