1.) जब स्क्रीन को छोटा किया जाता है, तो एनएवी बार एक दूसरे के ऊपर स्टैक्ड होने का जवाब नहीं दे रहा है जैसा कि उसे करना चाहिए, नीचे दिखाया गया चित्र एक फोन स्क्रीन का आकार मोटे तौर पर कैसा दिखता है:

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.) एक और बात यह है कि मेनू नेवी बार स्क्रीन के बहुत अंत तक नहीं खींच रहा है, मैंने इसे 100% चौड़ाई रखने की कोशिश की है, कृपया कोई मुझे कोई सलाह दे सकता है?

<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>

सीएसएस:

/* 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;
}
0
K.Haydock 2 मार्च 2019, 19:39

1 उत्तर

सबसे बढ़िया उत्तर

शैलियों की सहज कैस्केडिंग सुनिश्चित करने के लिए आपको सीएसएस फ़ाइल के निचले भाग में मीडिया प्रश्नों की घोषणा करनी होगी।

नीचे समाधान।

.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>

जेएसफ़िल्ड से लिंक करें

1
Allan Jebaraj 2 मार्च 2019, 20:01