While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues:
- The first issue is somewhat insignificant - when pressing alt in Firefox, it causes the window to resize slightly, revealing the top menu which then shifts the side menu from left to right. It's a bit bothersome but not critical.
- The second problem is more substantial - the content underneath the side menu remains hidden and does not adjust to ensure everything is visible. I attempted to address this by incorporating a div with a margin-left property in the CSS, but it did not yield the desired outcome.
Below is the HTML code snippet:
<nav>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a></nav>
Additionally, here is the accompanying JavaScript code:
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
$('.collapsible').collapsible();
These are the provided codes from the documentation, and I am currently grappling with these aforementioned challenges. Any assistance or solutions would be greatly appreciated! Thank you!