Reputation: 476
1.) When the screen is made smaller, the nav bar is not responding to being stacked on top of one another as it should do, Image shown below of what a phone screen size roughly looks like:
2.) Another thing is that the menu nav bar is not stretching to the very end of the screen, I have tried to place it 100% width, please can someone give me any advice?
<header>
<div class="row">
<div class="grid-6">
<div class="navbar">
<a class="active" href="home.php"><i class="fas fa-home"></i> Home</a>
<a href="Gallery.html"><i class="fas fa-images"></i> Gallery</a>
<div class="dropdown">
<button class="dropbtn"><i class="fas fa-award"></i> Competitions</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="Blog.html"><i class="fas fa-blog"></i> Blog</a>
<a href="Contact.html"><i class="fas fa-envelope"></i> Contact</a>
<a href="Signup.php"><i class="fas fa-check-square"></i> Signup</a>
<a href="Login.php"><i class="fas fa-sign-in-alt"></i> Login</a>
<a href="Logout.inc.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
</div>
</header>
CSS:
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
Upvotes: 0
Views: 1121
Reputation: 1077
You'll have to declare the media queries at the bottom of the css file in order to ensure smooth cascading of the styles.
Solution below.
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media only screen and (max-width: 500px) {
.navbar a,
.dropdown {
float: none;
display: block;
text-align: center;
}
}
<header>
<div class="row">
<div class="grid-6">
<div class="navbar">
<a class="active" href="home.php"><i class="fas fa-home"></i> Home</a>
<a href="Gallery.html"><i class="fas fa-images"></i> Gallery</a>
<div class="dropdown">
<button class="dropbtn"><i class="fas fa-award"></i> Competitions</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="Blog.html"><i class="fas fa-blog"></i> Blog</a>
<a href="Contact.html"><i class="fas fa-envelope"></i> Contact</a>
<a href="Signup.php"><i class="fas fa-check-square"></i> Signup</a>
<a href="Login.php"><i class="fas fa-sign-in-alt"></i> Login</a>
<a href="Logout.inc.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
</div>
</header>
Upvotes: 1