Sunny0101
Sunny0101

Reputation: 476

Navbar is not being responsive when the screen size is shrunk

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:

Either side of menu nav bar there is white space which I don't want

Nav Bar when viewed on a phone screen size

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

Answers (1)

Allan Jebaraj
Allan Jebaraj

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>

link to jsFiddle

Upvotes: 1

Related Questions