badassmark24
New Member
I have been trying to create a website with a fixed header but which is also responsive. Here is what I have so far. I would stick it in a jsfiddle but you can't see what I am trying to explain. The \[code\].css\[/code\] is in the \[code\].scss\[/code\] format as the \[code\].css\[/code\] is compressed.HTML : \[code\]<title> Skinny Beer </title><meta name="description" content="/"><meta name="author" content="Josh Hornby"><meta name="author" content="@joshua_hornby"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="http://stackoverflow.com/questions/13753512/design.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/13753512/stylesheets/base.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/13753512/stylesheets/skeleton.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/13753512/stylesheets/layout.css"></head><body><div class="container"><nav id="main-nav"><div id="nav-wrapper"> <div class="six columns" <div id="logo" style="background-color:black;"></div> </div> <div class="ten columns"> <ul> <span class="nav-links"> <li><a href="http://stackoverflow.com/questions/13753512/index.html">Home</a></li> <li><a href="http://stackoverflow.com/questions/13753512/index.html">About</a></li> <li><a href="http://stackoverflow.com/questions/13753512/index.html">Beer</a></li> <li><a href="http://stackoverflow.com/questions/13753512/index.html">Contact</a></li> </div></div></nav>\[/code\]CSS :\[code\]#main-nav{-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);-webkit-transition: box-shadow 0.2s linear;-moz-transition: box-shadow 0.2s linear;-ms-transition: box-shadow 0.2s linear;-o-transition: box-shadow 0.2s linear;transition: box-shadow 0.2s linear;border-bottom: 1px solid rgba(0, 0, 0, 0.2);display: block;position: fixed;top: 0;left: 0;float: left;width: 100%;z-index: 12;height: 60px;background-color: white;ul { position: relative; margin-top: 10px;}li { vertical-align: middle; display: inline; margin: 0 2px; color: black; list-style-type: none;}a { text-decoration: none;} }#nav-wrapper {position: relative;margin-left: auto;margin-right: auto;width: 800px;}#logo {height: 25px;width: 118px;display: inline-block;float: left;padding: 5px 10px;margin-top: 11px;margin-left: -13px;}\[/code\]What I am after is when the user is on an iPhone lets say the nav shrinks downs and the text doesnt drop below. Will I have to use media queries? If so is there a quick way to do them for all devices?