JSFiddle - React, Tailwind, and code Playground

by Mariel Temblor

HTML

<body>
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
		<nav>
        	<ul>
                <li><a href="index.php" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li>
					<li><a href="usage.php" > CHEESECLOTH USAGE</a></li>
					<li><a href="reviews.php" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="tips.php" > TIPS and IDEAS </a></li>
					<li><a href="recipe.php" > RECIPES </a></li>
					<li><a href="ideas.php" > NEWS and EVENTS </a></li>
				</ul>
				</li>
				<li><a href="about.php" > ABOUT US </a> </li>
				<li><a href="contact.php" > CONTACT US </a> </li>
        	</ul> 
			<br class="clearFloat" />
			</nav>
        </div>
</header>

<section id="content">
		<div class="about" id="about">
		<center>
			<table style="width:750px; border:3px solid #961b1e">
				<tr>
					<td style ="border:1px solid #961b1e">
					<p>
						The idea for creating this product came from a series of holidays spent in the Las Vegas desert among some of the world’s greatest restaurants and chefs and missing out on those home-cooked meals with my family.
						<br /><br />I grew up on the East Coast, and when I would help my mom prepare holiday meals, we definitely used cheesecloth to keep the roasted meats nice and juicy.
						<br /><br />Of course, we also used cheesecloth leftover from the holidays for other arts and crafts projects as well. Halloween was especially great, because we used cheesecloth to create spider webs, ghosts and mummy decorations.
						<br /><br />I really missed those days, and as I got a little older, I decided I wanted to start enjoying some of those old holiday traditions again, and it started with meeting some of the great chefs that Las Vegas had to offer.
						<br /><br />Almost everyone in Las Vegas works in the service industry, and you eventually befriend...

CSS

.fmenu,
.push {
  height: 4em;
  clear: both;
}
/*ends here */

body {
  background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
  font-family: Avenir !important;
  font-size: 12pt;
  line-height: 20px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header {
  background: url(images/header.jpg) no-repeat;
  min-height: 270px;
  overflow: hidden;
  background-size: 100%;
}
#content {
  float: left;
  width: 100%;
  margin-top: -101px;
  background: #fff;
  position: relative;
}
#img {
  margin: 5px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
#img img {
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
#desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
#container {
  width: 826px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px #ccc;
}
#menu {
  margin: 0;
  padding: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  margin-left: 35px;
  margin-top: 139px;
}
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background: #fff;
}
#menu ul li a {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  margin-left: 10px;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
  text-align: center;
  margin-left: 0px;
}
#menu ul li ul {
  margin-top: -5px;
}
#menu ul li ul li {
  margin-top: -2px;
  margin-left: -35px;
  position: relative;
}
#menu ul ul {
  position: absolute;
  top: 32px;
}
#menu ul li:hover ul {
  z-index: 1;
}
/*******************************/

#menu...

JavaScript

jQuery(document).ready(function() {
	
	// define variables
	var navOffset, scrollPos = 0;
	
	// add utility wrapper elements for positioning
	jQuery("nav").wrap('<div class="nav-placeholder"></div>');
	jQuery("nav").wrapInner('<div class="nav-inner"></div>');
	jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
	
	// function to run on page load and window resize
	function stickyUtility() {
		
		// only update navOffset if it is not currently using fixed position
		if (!jQuery("nav").hasClass("fixed")) {
			navOffset = jQuery("nav").offset().top;
		}
		
		// apply matching height to nav wrapper div to avoid awkward content jumps
		jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
		
	} // end stickyUtility function
	
	// run on page load
	stickyUtility();
	
	// run on window resize
	jQuery(window).resize(function() {
		stickyUtility();
	});
	
	// run on scroll event
	jQuery(window).scroll(function() {
		
		scrollPos = jQuery(window).scrollTop();
		
		if (scrollPos >= navOffset) {
			jQuery("nav").addClass("fixed");
		} else {
			jQuery("nav").removeClass("fixed");
		}
		
	});
	
});