<title>HOTDOG!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.mobile-container {
max-width: 100%;
margin: auto;
background-color: #fff;
color: black;
border-radius: 10px;
}
.topnav {
color:white;
overflow: hidden;
background-color: #000;
position: fixed;
z-index:500;
width:100%;
top:0;
left:0;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
display: block;
height:45px;/**/
overflow-y: hidden;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
height:45px;
width:45px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #000;
color: white;
}
#morestuff{
margin-top:200px;
color:red;
}
</style>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="index.html" class="active">
<!--art466-->
<img src="art466.png" width="147" height="47" alt="ART 466"/> </a>
<div id="myLinks">
<a href="index.html">HOME</a>
<a href="syllabus.html">SYLLABUS</a>
<a href="students.html">STUDENTS</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
