Databases
StackOverflow2013
Postsdbo
POSkeleton Grid - Navigation overlaps first column when browser is shrunk
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSkeleton Grid - Navigation overlaps first column when browser is shrunk
    text
    copied!<p>I am using the Skeleton responsive grid system and have run into an issue where my navigation overlaps my columns when a browser is shrunk. Everything else is laid out correctly. Here are pictures of what I mean.</p> <p><img src="https://i.stack.imgur.com/Z3qIB.png" alt="Full Browser"></p> <p><img src="https://i.stack.imgur.com/inFaz.png" alt="Shrunk"></p> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;!--[if lt IE 7 ]&gt;&lt;html class="ie ie6" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7 ]&gt;&lt;html class="ie ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8 ]&gt;&lt;html class="ie ie8" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if (gte IE 9)|!(IE)]&gt;&lt;!--&gt; &lt;html lang="en"&gt; &lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;!-- Basic Page Needs --&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Your Page Title Here :)&lt;/title&gt; &lt;meta name="description" content=""&gt; &lt;meta name="author" content=""&gt; &lt;!-- Mobile Specific Metas --&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt; &lt;!-- CSS --&gt; &lt;link rel="stylesheet" href="stylesheets/base.css"&gt; &lt;link rel="stylesheet" href="stylesheets/skeleton.css"&gt; &lt;link rel="stylesheet" href="stylesheets/layout.css"&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;!-- Favicons --&gt; &lt;link rel="shortcut icon" href="images/favicon.ico"&gt; &lt;link rel="apple-touch-icon" href="images/apple-touch-icon.png"&gt; &lt;link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"&gt; &lt;link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="band navigation"&gt; &lt;div class="container"&gt; &lt;div id="logo" class="two columns"&gt; &lt;h1&gt;DS&lt;/h1&gt; &lt;/div&gt; &lt;div id="nav" class="fourteen columns"&gt; &lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;TEST&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;TEST&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;TEST&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- End Band --&gt; &lt;div class="band content" id="content"&gt; &lt;div class="container main"&gt; &lt;div class="nine columns alpha"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ligula urna. Curabitur eleifend lacinia turpis, ac fringilla nulla scelerisque nec. Nulla pretium vulputate vehicula. Nam eu condimentum neque. Morbi ut neque gravida, ornare metus ac, pretium turpis. Mauris odio arcu, feugiat vel blandit ac, ultricies id nunc. In in libero porttitor, rutrum urna a, scelerisque est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nisi quis metus pretium ornare. Maecenas venenatis sapien id justo fermentum mollis. Mauris porta fringilla lacinia. Aliquam laoreet quis mi imperdiet congue. Donec pharetra tellus sed mauris porttitor vestibulum. Pellentesque eget imperdiet justo. Vivamus ac fringilla leo. Curabitur sapien orci, pharetra semper bibendum et, sodales eu quam. Curabitur sit amet ullamcorper tortor. Nam placerat tellus sed convallis cursus. Duis at augue eleifend, euismod quam eu, tincidunt felis. Integer ut ullamcorper mauris, lobortis convallis est. Nullam vitae sapien massa. Suspendisse eget enim enim. Morbi pretium consectetur lectus ac aliquet. Fusce mauris nisl, tincidunt a ultrices vestibulum, mattis sed sem. Integer consequat viverra eros, non ullamcorper dui. Nam massa elit, malesuada tempus nibh eget, pretium commodo lectus. Aenean pharetra porta lacus quis cursus. Aliquam erat volutpat. Aenean porta ac ligula a sodales. Cras scelerisque purus enim, ac imperdiet ligula mollis in. Fusce sed lacinia purus, ac rhoncus nunc. Nunc eget elit quis risus commodo ultrices a eget est. Aliquam sit amet ultrices nunc. Praesent accumsan risus eu magna aliquam posuere. Etiam volutpat ut elit vel condimentum. Nam vel nisl nisl. Morbi tincidunt velit vel diam commodo rutrum quis semper ligula. Quisque lacinia nec est ut aliquet. Aenean non aliquam turpis. Nullam pellentesque sit amet metus eu rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam venenatis, enim sit amet sollicitudin rhoncus, lorem lectus imperdiet justo, at placerat risus urna non diam. Ut vitae tincidunt enim, non feugiat massa. Integer fermentum suscipit lorem eu placerat. Donec aliquet, lectus at tincidunt pharetra, nulla augue auctor elit, vel dapibus arcu felis vel augue. Sed fermentum congue tristique. Nam nec sodales massa, eget porttitor lacus. Donec at dui semper, pretium dolor pulvinar, faucibus quam.&lt;/p&gt;&lt;/div&gt; &lt;div id="welcome" class="seven columns omega"&gt; &lt;h1&gt;DS&lt;/h1&gt; &lt;h3&gt;This is a test&lt;/h3&gt; &lt;/div&gt; &lt;div class="seven columns omega"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ligula urna. Curabitur eleifend lacinia turpis, ac fringilla nulla scelerisque nec. Nulla pretium vulputate vehicula. Nam eu condimentum neque. Morbi ut neque gravida, ornare metus ac, pretium turpis. Mauris odio arcu, feugiat vel blandit ac, ultricies id nunc. In in libero porttitor, rutrum urna a, scelerisque est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt; &lt;/div&gt; &lt;div id="download" class="four columns omega"&gt; &lt;p&gt;Download for free on the iPhone.&lt;/p&gt; &lt;/div&gt; &lt;div class="three columns omega"&gt; &lt;img src="images/appleAppStore.png" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>.container { } #welcome { margin-top: 10px; text-align: left; } .band.navigation{ background-color: #3d6430; width:100%; border-bottom: 10px solid #28421f; margin: 0px; position: fixed; z-index: 3; top:0; } .band.content { margin-top: 100px; } #welcome { margin-top:0; } #welcome h1 { text-align: center; } #welcome h2 { text-align: center; } #navigation { top:0; background-color: #3d6430; } #download { margin-top: 10px; } #nav { margin: 13px 0 0 0; background-color: #3d6430; } #nav ul li { display: inline; margin: 0 20px 0 0; margin-bottom: 130px; } #nav a { font-weight: heavy; text-decoration: none; color: #fff; } #nav a:hover { text-decoration: underline; } #headerImage img { margin-bottom: 50px; max-width: 100%; height: auto; } #welcome { margin-bottom: 20px; } /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /* #Page Styles ================================================== */ /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload