FewFlyBy FewFlyBy - 2 months ago 37
HTML Question

Materialize CSS Sidenav and Content

I'm using

Materialize CSS
to design my portfolio and having some issues now. The screenshot of what my website looks for now is this:

enter image description here

As you can see, the About part is below the nav which is my problem. I want it to be moved to the right so that it can be seen. My code for now is:

<!DOCTYPE html>
<!--Import Font awesome Icon Font-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<ul id="staggered-list" class="side-nav fixed grey darken-4 blue-grey-text text-lighten-4 go">
<br />
<div style="text-align:center;" id="profilepic">
<img src="./images/robertsoriano.jpg" alt="" class="circle responsive-img" width="200"> <br />
Robert Soriano
<br /> <br />
<li><a class="grey-text text-lighten-2" href="#"><i class="fa fa-user fa-2x fa-fw"></i>Home</a></li>
<li><a id="links" class="pink-text lighten-2" href="#"><i class="fa fa-terminal fa-2x fa-fw"></i>Projects</a></li>
<li><a id="links" class="green-text text-lighten-2" href="#"><i class="fa fa-bar-chart fa-2x fa-fw"></i>Skills</a></li>
<li><a id="links" class="yellow-text text-lighten-2" href="#"><i class="fa fa-graduation-cap fa-2x fa-fw"></i>Education</a></li>
<li><a id="links"class="blue-text text-lighten-2" href="#"><i class="fa fa-code fa-2x fa-fw"></i>Source Codes</a></li>
<div class="section">
<div class="container">
<div class="row">
<div class="col s12 m9">
<h1 class="header center-on-small-only">About</h1>
<h4 class ="light red-text text-lighten-4 center-on-small-only">Learn about the Material Design and our Project Team.</h4>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
$(document).ready(function() {



body {
background-image: url("../images/small_steps.png");
background-color: #cccccc;

.go a:before,
.go a:after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;

.go a:before {
margin-right: 10px;
content: '[';
-webkit-transform: translate(20px);
-moz-transform: translate(20px);
transform: translate(20px);

.go a:after {
margin-left: 10px;
content: ']';
-webkit-transform: translate(-20px);
-moz-transform: translate(-20px);
transform: translate(-20px);

.go a:hover:before,
.go a:hover:after,
.go a:focus:before,
.go a:focus:after {
opacity: 1;
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
transform: translate(0px);

Fiddle: https://jsfiddle.net/ugwwxk64/

Any help would be really much appreciated. Thank you.


The overlapping occurs only when the screen is above 991px. So you need to assign some padding for the main element for the specific screen size.

@media (min-width: 991px) {
  main {
    padding-left: 120px;

Updated JSfiddle