HTML
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
<img class="header-image fadey" alt="Writing in a Notepad" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=59f17a21ae8a708059646146af380320&auto=format&fit=crop&w=960&q=80"/>
<div class="copy">
<p>
<h1>Page Title</h1>
And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! This is the worst part. The calm before the battle.</p>
<p>I am Singing Wind, Chief of the Martians. I'm sorry, guys. I never meant to hurt you. Just to destroy everything you ever believed in. I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny!</p>
<p>Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd. Well, let's just dump it in the sewer and say we delivered it. I never loved you. You've killed me! Oh, you've killed me!</p>
<p>Ummm…to eBay? I usually try to keep my sadness pent up inside where it can fester quietly as a mental illness. Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
<p>Too much work. Let's burn it and say we dumped it in the sewer. Hey, guess what you're accessories to. Well, let's just dump it in the sewer and say we delivered it. No! The cat shelter's on to me. Your best is an idiot!</p>
<p>Bender?! You stole the atom. It's okay, Bender. I like cooking too. When will that be? Yeah. Give a little credit to our public schools. Now, now. Perfectly symmetrical violence never solved anything. Daylight and everything.</p>
<p>Shinier than yours, meatbag. We're also Santa Claus! A sexy mistake. No! Don't jump! Okay, I like a challenge. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
<p>Then throw her in the laundry room, which will hereafter be referred to as "the brig". Oh Leela! You're the only person I could turn to; you're the only person who ever loved me. I am Singing Wind, Chief of the Martians.</p>
<p>Are you crazy? I can't swallow that. Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all. Why, those are the Grunka-Lunkas! They work here in the Slurm factory.</p>
<h2>Here is an H2</h2>
<p>Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
<p>Who are those horrible orange men? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. That's right, baby. I ain't your loverboy Flexo, the guy you love so much. You even love anyone pretending to be him!</p>
<p>My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. You lived before you met me?!</p>
<p>I'm Santa Claus! I saw you with those two "ladies of the evening" at Elzars. Explain that. Kids don't turn rotten just from watching TV. But I've never been to the moon! You'll have all the Slurm you can drink when you're partying with Slurms McKenzie!</p>
<p>Now what? Bite my shiny metal ass. Yeah. Give a little credit to our public schools. Why yes! Thanks for noticing. OK, if everyone's finished being stupid.</p>
<p>You can see how I lived before I met you. Bender?! You stole the atom. You know, I was God once. Pansy.</p>
<p>For example, if you killed your grandfather, you'd cease to exist! In our darkest hour, we can stand erect, with proud upthrust bosoms. No, just a regular mistake. I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring.</p>
<p>Negative, bossy meat creature! Also Zoidberg. Ah, computer dating. It's like pimping, but you rarely have to use the phrase "upside your head." It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</p>
<p>Wow, you got that off the Internet? In my day, the Internet was only used to download pornography. You know the worst thing about being a slave? They make you work, but they don't pay you or let you go.</p>
<p>But, like most politicians, he promised more than he could deliver. Fetal stemcells, aren't those controversial? Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>
<p>I wish! It's a nickel. Yeah, I do that with my stupidness. Oh, you're a dollar naughtier than most. Bite my shiny metal ass.</p>
</div>
</div>
<div class="main-menu">
<ul class="top-menu">
<div class="logo"><img alt="RLM Mobile Logo" src="http://redlettermarketing.com/wp-content/themes/redletter/images/red-logo.png"/></div>
<li class="big-drop"><a href="">Menu Item One</a></li>
<li>Menu Item Two <i class="material-icons">arrow_drop_down</i>
<ul class="sub-menu">
<li>Sub Link One</li>
<li>Sub Link Two</li>
<li>Sub Link Three</li>
</ul>
</li>
<li>Menu Item Three</li>
<li class="big-drop">Menu Item Four <i class="material-icons">arrow_drop_down</i>
<div class="big-sub-menu">
<div class="menu-block">
<div class="menu-title">Menu Title</div>
<ul>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
</div>
<div class="menu-block">
<div class="menu-title">Menu Two Title</div>
<ul>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
</div>
<div class="menu-block">Block Three</div>
<div class="menu-block">
Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments." File not found. Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.
Ooh, name it after me! Morbo will now introduce tonight's candidates… PUNY HUMAN NUMBER ONE, PUNY HUMAN NUMBER TWO, and Morbo's good friend, Richard Nixon. I don't want to be rescued. Yeah. Give a little credit to our public schools.
</div>
</div>
</li>
<li class="header-search"><i class="material-icons">search</i></li>
</ul>
<img class="mobile-logo" alt="Company Logo" src="http://redlettermarketing.com/wp-content/themes/redletter/images/red-logo.png"/>
<div class="menu-btn"><i class="material-icons">menu</i></div>
</div>
CSS
html, body{
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
}
ul{
display: block;
position: relative;
margin: 0;
padding: 0;
}
.header-image{
display: block;
position: relative;
width: 100%;
height: 600px;
}
.main-content{
display: block;
position: relative;
position: width;
height: 100vh;
margin: 0 0 0 0;
}
.copy{
display: block;
position: relative;
margin: 0 auto;
max-width: calc(960px);
padding: 20px 0 20px 0;
}
.header-image{
width: 100%;
height: auto;
}
@media screen and (max-width: 992px) {
.main-content{
top:0px;
position: absolute;
overflow-x: scroll;
width: 100%;
}
.copy{
padding: 20px 20px 20px 20px;
}
}
.main-menu{
display: block;
position: fixed;
z-index: 999;
top: 0px;
left: 0px;
width: 100%;
min-height: 40px;
height: auto;
background-color: rgba(255, 251, 251, 0.74);
overflow-y: scroll;
box-shadow: 0px 0px 16px black;
}
.menu-btn{
display: none;
position: absolute;
top: 6px;
right: 20px;
text-align: right;
background-color: transparent;
}
.mobile-logo{
display: none;
position: absolute;
top: 8px;
left: 20px;
text-align: right;
background-color: transparent;
width: 25px;
}
.main-menu .top-menu{
margin: 0;
padding: 10px 0 0 0;
max-width: 960px;
display: block;
position: relative;
margin: 0 auto;
width: calc(100% - 40px);
list-style: none;
}
.top-menu .logo{
display: inline-block;
float: left;
margin: 0 10px 0 0;
}
.top-menu .logo img{
max-width: 30px;
}
@media screen and (min-width: 993px) {
.main-menu .top-menu{
display: block !important;
position: relative;
}
}
.header-search{
position: absolute;
display: block;
right: 0px;
}
@media screen and (max-width: 992px) {
.main-menu{
position: absolute;
min-height: 20px;
padding: 0 0 20px 0;
}
.main-menu .top-menu{
display: none;
width: calc(100% - 40px);
padding: 40px 20px 0 20px;
}
.menu-btn{
display: block;
}
.mobile-logo{
display: block;
}
.header-search{
display: none !important;
}
.top-menu .logo{
display: none;
}
}
.top-menu li{
display: inline-block;
float: left;
margin: 0 20px 0 0;
padding: 8px 0 8px 0;
border-style: solid;
border-width: 0 0 2px 0;
border-color: transparent;
transition: all 0.5s;
cursor: pointer;
}
.top-menu li a{
color: #000;
text-decoration: none;
}
.top-menu li:hover{
border-color:#336699;
}
@media screen and (max-width: 992px) {
.top-menu li{
float: none;
display: block;
position: relative;
width: 100%;
}
}
.top-menu li .sub-menu{
display: none;
position: fixed;
margin: 0;
padding: 0;
width: 250px;
top: 50px;
}
.top-menu li .sub-menu li:last-child{
border-width: 0 !important;
}
.sub-menu li:last-child{
border: none !important;
}
@media screen and (max-width: 992px) {
.top-menu li .sub-menu{
margin: 10px 0 10px 0;
padding: 0;
position: relative;
width: 100%;
top:0px;
}
}
.top-menu .sub-menu li{
color: #fff;
display: block;
position: relative;
width: 100%;
text-indent: 10px;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #666;
background-color: rgba(0, 0, 0, 0.8);
}
.top-menu .sub-menu li:hover{
border-style: solid;
border-width: 0 0 1px 0;
border-color: #999;
}
.top-menu li .big-sub-menu{
display: none;
position: fixed;
width: 100vw;
background-color: rgba(0, 0, 0, 0.8);
left: 0px;
top: 50px;
}
.top-menu li .big-sub-menu li{
color: #ccc;
}
@media screen and (max-width: 992px) {
.top-menu li .big-sub-menu{
position: relative;
width: 100%;
margin: 0 0 0 0;
top:0px;
}
}
.menu-block{
display: block;
position: relative;
float: left;
width: calc(25% - 42px);
color: #fff;
padding: 20px 20px 20px 20px;
border-width: 0 1px 0 0;
border-color: #666;
border-style: solid;
min-height: 300px;
margin: 20px 0 20px 0;
}
@media screen and (max-width: 992px) {
.menu-block{
display: block;
position: relative;
float: none;
width: calc(100% - 42px);
min-height: 0;
}
}
.menu-block ul li{
display: block;
position: relative;
width: 100%;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #666;
transition: all 0.5s;
}
.menu-block ul li:hover{
border-color: #999;
}
.menu-block:last-child{
border:none;
}
.menu-block .menu-title{
font-size: 14px;
color: #efefef;
text-transform: uppercase;
}
li .material-icons{
margin: 0;
padding: 0;
margin-top:-2px;
display: inline-block;
float: right;
background-color: transparent;
}
