Responsive layout with 3d flipping Menu - html

Question

I am creating a bootstrap based website. I am trying to integrate 3D flipping Menu instead of current the Menu Which is shown in the above Demo with these two Menus
For 1200px plus grid size
For less than 720px grid size
Before Integration
And
Upon Integrating it To this is what it looks like
In the first case the Menu is not getting the desired width and height without hard coding height and width.I want my menu after integration to have the height and width of menu before integration check to see the difference
How can I solve this?
HTML
<div id="Nav_Wrapper">
<ul id="Navig">
<li>
<div class="cube">
<div class="flippety">
<h1>Home</h1>
</div>
<div class="flop">
<h2>Home</h2>
</div>
</div>
</li>
<li>
<div class="cube">
<div class="flippety">
<h1>Services</h1>
</div>
<div class="flop">
<h2>Services</h2>
</div>
</div>
</li>
<li>
<div class="cube">
<div class="flippety">
<h1>About Us</h1>
</div>
<div class="flop">
<h2>About Us</h2>
</div>
</div>
</li>
<li>
<div class="cube">
<div class="flippety">
<h1>Contact us</h1>
</div>
<div class="flop">
<h2>Contact us</h2>
</div>
</div>
</li>
</ul>
</div>
CSS for 1200px
#Nav_Wrapper {
min-height: 120px;
background-color: #292929;
margin: 0;
}
#Nav_Wrapper #Navig li {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
}
#Nav_Wrapper #Navig li>a {
text-decoration: none;
}
/* Container box to set the sides relative to */
.cube {
width: 100%;
text-align: center;
/*margin: 0 auto;*/
position: relative;
height: 80px;
top: 0px;
left: 0px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s;
/* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* <-NB */;
}
/* The two faces of the cube */
.flippety {
text-decoration: none;
margin: 0px 10px 0px 0px;
padding: 0px;
font-weight: 800;
font-size: 25px;
color: #fff;
background-color: #292929;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.flop {
margin: 0px 10px 0px 0px;
font-weight: 800;
font-size: 25px;
border: 1px;
color: #777;
background-color: #323232;
border-width: 0px 0px 5px 0px;
border-color: #fff;
border-style: solid;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg);
/* Text bleed at 90º */;
}
body {
perspective: 1000px;
}