<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/webcraftsman/pen/JWEEYL?depth=everything&order=popularity&page=53&q=pack&show_forks=false" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">body {
background: #e7f8ff;
}
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
#global-menu {
background: white;
display: flex;
justify-content: flex-start;
flex-direction: row;
padding-left: 20%;
width: 80%;
}
#global-menu li {
border-bottom: 3px solid transparent;
color: #3b4e61;
font-family: 'Lato', sans-serif;
font-size: 21px;
font-weight: 700;
padding: 15px 10px;
text-transform: uppercase;
}
#global-menu li:hover {
border-bottom-color: red;
}
@media (max-width: 767px) {
#global-menu li:not(.my-sonic) {
visibility: hidden;
}
}
#global-menu li a {
color: inherit;
text-decoration: none;
}
#global-menu li:last-child {
border-bottom: 0;
margin-left: auto;
}
#global-menu li:last-child a {
background-color: red;
border-radius: 4px;
color: white;
padding: 6px;
}
#global-menu li:last-child a:hover {
background-color: #990000;
}
#menu-categories {
background: white;
overflow-y: hidden;
overflow-x: auto;
}
#menu-categories ol {
display: flex;
height: 98px;
min-width: 900px;
width: 100%;
}
@media (min-width: 768px) {
#menu-categories ol {
height: 198px;
min-width: 1200px;
}
}
#menu-categories li {
border: 1px solid #f5f5f5;
border-left: 0;
display: flex;
flex-direction: column-reverse;
flex: 1;
padding: 20px 0;
align-items: center;
}
#menu-categories li:hover, #menu-categories li.active {
background-image: radial-gradient(ellipse at center, #ffffff 40%, rgba(255, 235, 181, 0.6) 100%);
}
#menu-categories li.drinks:hover, #menu-categories li.drinks.active:hover {
background-image: radial-gradient(ellipse at center, #ffffff 40%, #d6e5f3 100%);
}
#menu-categories li.ice-cream:hover, #menu-categories li.ice-cream.active:hover {
background-image: radial-gradient(ellipse at center, #ffffff 40%, #f5efff 100%);
}
#menu-categories .food-category-name {
color: #3b4e61;
font-family: 'Lato', sans-serif;
font-size: 12px;
}
@media (min-width: 768px) {
#menu-categories .food-category-name {
font-size: 14px;
margin-top: 20px;
}
}
#menu-categories img {
max-width: 50%;
}
@media (min-width: 768px) {
#menu-categories img {
max-width: 100px;
}
}
.menu-items {
padding-top: 72px;
text-align: center;
}
.menu-items h2 {
color: #3B4E6F;
font-family: 'Lato', sans-serif;
font-size: 48px;
line-height: 52px;
margin: 0 0 20px;
}
.menu-items p {
color: #3B4E6F;
margin: 0 auto;
max-width: 550px;
opacity: .6;
}
.menu-item-listing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin: 32px auto 48px;
width: 90vw;
}
@media (min-width: 1388px) {
.menu-item-listing {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 200%;
}
}
.menu-item-listing li {
background-color: white;
border: 1px solid #f5f5f5;
border-left: 0;
border-top: 0;
display: flex;
flex-direction: column-reverse;
flex: 1;
padding: 20px 0;
position: relative;
align-items: center;
justify-content: space-around;
}
@media (min-width: 768px) {
.menu-item-listing li {
min-height: calc(90vw / 4);
}
}
.menu-item-listing li:hover {
background-image: radial-gradient(ellipse at center, #ffffff 40%, rgba(255, 235, 181, 0.6) 100%);
box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.08);
}
.menu-item-listing li:hover img {
transform: translateY(-10px);
}
.menu-item-listing .menu-item-name {
color: #3b4e61;
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 22px;
margin: 0 10px;
}
.menu-item-listing img {
max-width: 70%;
max-height: 230px;
transition: all .25s ease-in;
}
</style></head><body>
<ol id="global-menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Kids</a></li>
<li class="my-sonic"><a href="#">My Sonic</a></li>
</ol>
<nav id="menu-categories">
<ol>
<li>
<span class="food-category-name">All</span>
<img src="https://www.sonicdrivein.com/static/img/common/combo.png">
</li>
<li class="active">
<span class="food-category-name">Burgers</span>
<img src="https://lh3.googleusercontent.com/iXpM7AyZ6xcHp1rQ9RRUBve5TItpFxqSKYVJjRfaRRnBTEfToAnhltrKNSRemg1SO8yL55e10_NsknLk1IKq=s113" />
</li>
<li>
<span class="food-category-name">Hot Dogs</span>
<img src="https://lh5.ggpht.com/-_oqTokXPzwLcr5EXojx_w2nAOcvBtzofs496mBryXcXNQB497rjJX21uWT0nN87TQb5Fo48wNBLDYAtWk_Y=s113" />
</li>
<li>
<span class="food-category-name">Breakfast</span>
<img src="https://lh3.googleusercontent.com/PGn7fZ8PZuvN60nLNmXmTTx_WWRVUhW825NnfpgYUcg2Ln7NKKbbjb5G4M-53FcowiQEeYhcRJXl_s88dFs=s113" />
</li>
<li>
<span class="food-category-name">Chicken</span>
<img src="https://lh4.ggpht.com/0fBNgQdLFMT6RgMYAEvFj1cehTV4dYUSbZqY1ct3n6g8LtZsl3KoF9_Rp9dm5WY49iRIcSOt1-46TmghCKM=s113" />
</li>
<li>
<span class="food-category-name">Snacks & Sides</span>
<img src="https://lh6.ggpht.com/dFWl3zlKe9uP8u0vAS6hb6CNxSBGYwopAgSfTTEzIhQ0QJdXv85r0lStE01kXN4-nrfm-2fhdPt74AoL0YM=s113" />
</li>
<li class="drinks">
<span class="food-category-name">Drinks</span>
<img src="https://lh4.ggpht.com/_TonK_CrZJ3b2gOheqIlL_llzpLQQCLaD_s-i4Bq6-KgnnYMgXZgD55uc1afR-EUi5SSvqFHVOKMd9jtCnBp=s113" />
</li>
<li class="ice-cream">
<span class="food-category-name">Ice Cream</span>
<img src="https://lh5.ggpht.com/DyLhzGmaZqyOvBeO2OMCu1iBME3eAH7fQT7eWxdu97M3Cz7qaAmQr-tgBIv8bL1DrEwbsnTrxd8BWlBnGc_U=s113" />
</li>
<li>
<span class="food-category-name">Wacky Pack ®</span>
<img src="https://lh6.ggpht.com/JJ5YqPfDpyOv09KgD3cHA4zZWXz1u1A3KOVucZVguoyxpaBoOddju3u_u9H1ROftKvev7OGL6GfXbP43zpra=s113" />
</li>
</ol>
</nav>
<section class="menu-items">
<h2>Burgers</h2>
<p>Prepare to be delighted with 100% pure beef, melty cheese and fresh ingredients, all made to order.</p>
<ol class="menu-item-listing">
<li>
<span class="menu-item-name">Sonic® Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/GlXvLkghQncBfhlGBrZ3lQBOwuAK1fk-CEDOhRXRmrd2GneQky6i-I831rC648o8NhSgwcQhI1xo46j-ggXZ-Q=s400" />
</li>
<li>
<span class="menu-item-name"><em>Super</em>Sonic® Double Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/iXpM7AyZ6xcHp1rQ9RRUBve5TItpFxqSKYVJjRfaRRnBTEfToAnhltrKNSRemg1SO8yL55e10_NsknLk1IKq=s400" />
</li>
<li>
<span class="menu-item-name"><em>Super</em>Sonic® Bacon Double Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/Ele8gtDOd1tlQ4TebRJkf6XgpciDD2e57Jf5E3UwAzvfPs0kLhOXJLewZYsu1CFn9CPly0TLvrZUCqJnXMn0=s400" />
</li>
<li>
<span class="menu-item-name">Sonic® Bacon Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/MXGR72JVHpz8XzGHFcsMRIBVYpdJuzaOoPqTz0yOb18ZwvztJyhGZQMtxKVeEXac_6WH5k73fZ39nqmlnNyb=s400" />
</li>
<li>
<span class="menu-item-name">Jr. Burger</span>
<img src="https://lh3.googleusercontent.com/i-vHb3CryeDkJrTydwmJFJ1M1HrFtjAGIDC5xI7wI7bkOqV_iV0Zpr6jtm-9Lmv6n1pgkMBhJHSb2Ef1XMxLEQ=s400" />
</li>
<li>
<span class="menu-item-name">Jr. Double Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/rZffPhtsT38VMvV40KZNzgzGpiR8LVeqcRYDVHKYoWoz6vuKj_0X2nTcpUrqfbnVKSpsPOiR6eyos1el_2UB=s400" />
</li>
<li>
<span class="menu-item-name">Jr. Deluxe Cheeseburger</span>
<img src="https://lh3.googleusercontent.com/zEE3wNRoKGd8py4Jhod6HFaWf6iLjV3wtAjVZR-cC3pB0rRehlhBuKZOag8lL8af4XFAwEuSCl9kebbDpJibDg=s400" />
</li>
<li>
<span class="menu-item-name">Bacon Cheeseburger <em>TOASTER</em>®</span>
<img src="https://lh3.googleusercontent.com/87M6X6hiETZcuH7ViT87KncCMr7nnSOJH1djalKHDDfEAjUb2yBbSqBtofso_ecls1YClzOFaoAldam9Iskh_A=s400" />
</li>
</ol>
</section>
</body></html>
