Edit The Code:
See Result »
Try it Yourself - ©
w3ii.com
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/lib/w3.css"> <body> <nav class="w3-sidenav w3-light-grey" style="width:50%"> <div class="w3-container w3-dark-grey"> <h4>Menu</h4> </div> <img src="img_fjords.jpg" alt="Fjords" style="width:100%"> <a class="w3-red w3-padding" href="#">Home</a> <a class="w3-padding" href="#">Projects <span class="w3-tag w3-red w3-round w3-right">8</span></a> <a class="w3-padding" href="#">About</a> <a class="w3-padding" href="#">Contact</a> <div class="w3-container w3-section"> <div class="w3-border w3-round w3-padding w3-blue-grey"> <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span> <p>Lorem ipsum box...</p> </div> </div> </nav> <div style="margin-left:50%"> <div class="w3-container"> <p>Add whatever you like inside the side navigation.</p> </div> </div> </body> </html>