I have been attempting to make my menu responsive. www.treytrumble.com
It seems that because it is fixed, it will not scale properly when viewed on a device smaller than a laptop. What can I do to make the menu appear like this one when the screen is scaled to smaller than 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 & 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 is quite simple to accomplish, but it's quite a bit hard to explain. You have to use media queries to accomplish this, maybe even JavaScript.
Chris Coyier has a very interesting article in CSS-TRICKS that explains various concepts of responsive menus here: http://css-tricks.com/responsive-menu-concepts/
As for the main question, you can definitely make that menu responsive, though, I wouldn't suggest you put the exact same layout you have for desktop for mobile, because that would be a problem since the screen is too small, I would suggest making it go all the way to the top like a normal menu, being responsive, you can also fix it to the top and adding a padding-top to the remaining elements so that they don't go below the menu.
If you decide that the menu should be always on top, make sure you add a z-index property to the nav or div element so that no other goes across it too.
There is another approach you can take as well, but depending on what support you're giving to certain browsers I would suggest or not using Flexbox. If you display your navigation as display: flex and you tweak it CSS wise, you can achieve beautiful combinations, but again, remember this is a slightly new CSS3 property, and mainly Internet Explorer has just recently began supporting it.
More about Flexbox can be found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you're new to responsive/adaptive design, then sir you have a lot of work to do, but, luckily for you, there are today tons of free and/or paid resources that will give you a pretty good idea of what to do.
I found this article on Team Tree House very useful: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can go on from there and start looking for other resources, some of them mentioned on this answer:
If you want to make your menu responsive, you also need to make your site responsive, make sure you have all these: