I'm currently utilizing the Skeleton boilerplate to craft a responsive design.
Here is how it appears in Chrome and Firefox:
Chrome:
Firefox:
Visually, the gray bar intended to be the menu displays correctly in Chrome. My objective is to create a sticky menu that remains relatively fixed within its parent element.
Below is the CSS for the #menu (gray bar):
#menu {
z-index: 1000;
background: #666;
position: fixed;
}
Here is how the #menu is styled using the Skeleton boilerplate:
<div id="menu" class="sixteen columns">
This class gives the #menu the following styles:
.container .sixteen.columns {
width: 940px;
}
.container .column, .container .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
You can test it out at this URL:
Feel free to download the source code (apologies for the cluttered files):