I'm completely new to the world of responsive design with CSS. I recently created a responsive menu that works perfectly when I resize the browser window on my computer. However, when I try to access the site on my phone, the menu is just zoomed out and doesn't display correctly as it should in a responsive design.
Check out the site here
I'm really puzzled as to why this is happening. Any suggestions or insights from anyone who has experienced this before? I've set the maximum width to 900px so the menu should collapse when the window size is too small.
Here is the HTML code for the menu:
<ul class="topnav" id="myTopnav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
And here is the corresponding JavaScript code:
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Lastly, here is the responsive CSS for the menu:
@media screen and (max-width:900px) {
ul.topnav li {display:none;}
ul.topnav li.icon {
float: right;
display: inline-block;
opacity: 1;
}
}
@media screen and (max-width:900px) {
ul.topnav.responsive {position:relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
background-color: none;
opacity: 1;
}
ul.topnav.responsive li {
float: none;
display: inline;
position: relative;
top: 32px;
}
ul.topnav.responsive li a {
display: block;
text-align: right;
/*background-color: red;*/
}
}