JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="header-wrapper">
	<div id="header">		
			<div id="logo">
                <a href="http://kfceurope.com/"><img src="http://kfceurope.com/wp-content/uploads/2014/06/cropped-logo.png" width="267" height="99" alt="KFC Europe" /></a>
            </div><!-- end of #logo -->
		
        <div class="main-nav"><div id="responsive_current_menu_item">Home</div><ul class="menu"><li class="current_page_item"><a href="http://kfceurope.com/">Home</a></li><li class="page_item page-item-15"><a href="http://kfceurope.com/more-about-kfc/">More About KFC</a></li><li class="page_item page-item-17"><a href="http://kfceurope.com/franchise-opportunities/">Franchise Opportunities</a></li><li class="page_item page-item-19"><a href="http://kfceurope.com/restaurant-development/">Restaurant Development</a></li><li class="page_item page-item-21"><a href="http://kfceurope.com/apply-online/">Apply Online</a></li></ul>
<a id="responsive_menu_button"></a></div>	
	</div><!-- end of #header -->
</div>

CSS

#header-wrapper {
border-bottom: 0;
background-color: #c00a27;
min-height: 0;
max-height: 3.8em;
border-top: 5px solid #050505;
width: 100%;
position: fixed;
z-index: 100000;
top: 0;
}

#header {
margin: 0 auto;
max-width: 1200px;
}

#logo {
float: left;
margin: 0;
}

.main-nav {
text-align: center !important;
top: 0;
z-index: 100000000000;
background: none;
width: 100%;
}

.main-nav #responsive_current_menu_item {
display: block;
padding: 5px 40px 5px 10px;
font-size: 0;
cursor: pointer;
}

.main-nav #responsive_current_menu_item {
display: none;
}

.main-nav .menu {
display: none;
position: absolute;
width: 100%;
/*top: 12.3em;*/
z-index: 1000;
}

.main-nav a#responsive_menu_button {
position: absolute;
display: block;
top: 0.5em;
right: 0;
height: 51px;
width: 61px;
background: url('http://kfceurope.com/wp-content/themes/kfc/core/images/select-icons.png') 0 0px no-repeat;
cursor: pointer;
}

.menu {
margin-top: 3.5em !important;
max-width: 100%;
float: none;
}

.menu {
float: left;
min-height:0;
margin:0;
padding:0;
}

.main-nav .menu li {
float: none;
background: rgba(255,255,255,0.95);
margin: 0;
padding: 0;
width: 100%;
max-height: 4em;
border-bottom: 2px solid #272727 !important;
z-index: 10000000;
line-height: 4em;
}

.menu li {
border: 0;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
z-index: 5;
margin-top: 9.5em;
width: 20%;
}

#logo img {
max-width: 40%;
padding: 0.5em 0em 0em 0em;
    height:auto;
}

JavaScript

$(function() {
    $('#responsive_menu_button').click(function() {
        $('.main-nav .menu').toggle();
    });
});