I have this weird issue with Materialize CSS where the sidebar overlaps the content in the "main" panel as well as the footer (see image here: most content is censored on the page, the "m" in the title is part of the title text "Problem Submission"), even though I believe I have the gridding set properly. It happens both with Chrome and Safari (I bet no hope for IE either). Here's the basic structure of my document, where all of the below markup is within the <body> tag (it's a Jinja template, script includes and everything are located in a "base" template):
<header>
<nav class="top-nav green">
<div class="container">
<a href = "#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a>
</div>
<div class="container">
<div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
</div>
</nav>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
<li></li>
<li></li>
<li></li>
{% block navlinks %}
<li class="bold"><a href="/" class="waves-effect waves-teal">Back to Home</a></li>
{% endblock %}
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
{% block jumbo_content %}{% endblock %}
</div>
</div>
<div class="row">
<div class="col s12 m9 l10"><!-- Main content goes here -->
{% block main_content %}
{% endblock %}
</div>
<div class="col hide-on-small-only m3 l2"><!-- Nothing goes here (usually TOC -->
{% block toc_content %}
{% endblock %}
</div>
</div>
</div>
</main>
<footer class="page-footer green" style = "position: -webkit-sticky;">
<div class="container">
<div class="row">
<div class="col l9 m9 s12">
<h5 class="white-text">Brand Name</h5>
<p class="grey-text text-lighten-4">Description</p>
</div>
<div class="col l3 m3 offset-m3">
<h5 class="white-text">Important Links</h5>
<ul>
<li><a class="white-text" href="/login">Login</a></li>
<li><a class="white-text" href="/contact_us">Contact Us</a></li>
<li><a class="white-text" href="/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright notice
</div>
</div>
</footer>
Has anyone had any similar issues or can anyone point out something wrong with my HTML layout?
If you check the side nav documentation and scroll all the way to the bottom, it shows how you can offset your content when using a fixed side nav.
Basically, you just add a padding left to your entire content.
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
The media query will make sure the padding disappears when your side nav disappears on smaller screens. You can also tweak the size of the padding left according to how big your side nav is.