As a newcomer to web design, this is only the second website I have ever created. However, I am facing an issue with my Nav bar that I cannot seem to resolve. I want my "Other Pages" section to be visible when the screen size is below 600px and hidden when it exceeds that limit. The ul navbar should appear when the screen size is above 600px and disappear below that threshold.
I apologize for any strain on your eyes caused by this.
HTML
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="html/aboutus.html">About Us</a></li>
<li><a href="html/menu.html">Menu</a></li>
<li><a href="html/zoo.html">Zoo</a></li>
<li><a href="html/parksandwalks.html">Parks and Walks</a></li>
</ul>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Other Pages
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a class="active" href="index.html">Home</a>
<a href="../sunshine/html/aboutus.html">About Us</a>
<a href="../sunshine/html/menu.html">Menu</a>
<a href="../sunshine/html/zoo.html">Zoo</a>
<a href="../sunshine/html/parksandwalks.html">Parks and Walks</a>
</div>
</div>
</div>
CSS
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 150px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
@media only screen and (max-width: 600px) {
[class*="col-6"] {
width: 100%;
}
}
@media only screen and (max-width: 600px) {
li a {width: 100%}
}
@media only screen and (max-width: 600px) {
li a {text-align: center;}
}
@media only screen and (max-width: 600px) {
li {width: 100%}
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
@media only screen and (max-width: 60px) {
div.navbar {
display: none;
}
@media only screen and (max-width: 60px) {
div.links {
display: none;
}
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
width: 100%;
overflow: hidden;
text-align: center
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
width: 100%;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
I deeply regret any discomfort caused to your eyes from viewing this code. Yes, I did gather most of this information from W3Schools.