html - Is it possible to make my fixed menu responsive? -

html - Is it possible to make my fixed menu responsive? -

i have been attempting create menu responsive. www.treytrumble.com seems because fixed, not scale when viewed on device smaller laptop. can create menu appear 1 when screen scaled smaller 1,150px wide? http://www.adtile.me

html

<div class="contactcontainer"> <div class="contactmenu">trey trumble<br /><br/>804-513-7704 <br/><br/> <a href="mailto:trey@treytrumble.com" class="font5">trey@treytrumble.com</a><br/><br/><a href="images/trey trumble resume.pdf" class="font5">resume</a> </div><!-- end .contactmenu --> </div><!-- end .contactcontainer --> <div class="container"> <div class="sidebar1"> <table width="120" height="104" border="0"> <tr> <th scope="col"></th> </tr> </table> <ul class="nav"> <li><img src="images/logo.jpg" width="180"/></li> <li><a id="webbutton" class="nav">web design</a></li> <li><a id="printbutton" class="nav">print design</a></li> <li><a span class="contactbutton">contact &amp; resume</span></a></li></ul> </div><!-- end .sidebar1 -->

css

.content ul, .content ol { padding: 0 15px 15px 40px; } ul.nav { list-style: none; border-top: 1px solid #666; margin-bottom: 15px; position:fixed; } ul.nav li { border-bottom: 1px solid #666; letter-spacing: 2px; font-family: "helvetica", arial, sans-serif; cursor: pointer; } ul.nav a, ul.nav a:visited { padding: 5px 5px 5px 15px; display: block; width: 160px; text-decoration: none; background: #fff; inline-box-align:initial; color:#f60; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background:#f60; color: #fff; font-family: "helvetica", arial, sans-serif; letter-spacing: 2px; font-size: 9px; }

this quite simple accomplish, it's quite bit hard explain. have utilize media queries accomplish this, maybe javascript.

media queries

chris coyier has interesting article in css-tricks explains various concepts of responsive menus here: http://css-tricks.com/responsive-menu-concepts/

as main question, can create menu responsive, though, wouldn't suggest set exact same layout have desktop mobile, because problem since screen small, suggest making go way top normal menu, beingness responsive, can prepare top , adding padding-top remaining elements don't go below menu.

if decide menu should on top, create sure add together z-index property nav or div element no other goes across too.

flexbox

there approach can take well, depending on back upwards you're giving browsers suggest or not using flexbox. if display navigation display: flex , tweak css wise, can accomplish beautiful combinations, again, remember new css3 property, , net explorer has began supporting it.

more flexbox can found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

responsive design

if you're new responsive/adaptive design, sir have lot of work do, but, luckily you, there today tons of free and/or paid resources give pretty thought of do.

i found article on team tree house useful: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

you can go on there , start looking other resources, of them mentioned on answer:

media queries flexbox other tips

if want create menu responsive, need create site responsive, create sure have these:

responsive viewport tag html5 doctype a plan (grid system, media queries, flexbox, etc) fallbacks unsupported content

html css menu responsive-design fixed