Responsive website is not working

BOOBALAN.V
5StarLounger
Posts: 737
Joined: 24 Aug 2017, 07:43

Responsive website is not working

Post by BOOBALAN.V »

Dear Community,
I tried to create a responsive header only for learning purpose. But i couldn't understand the following. Please help me. I am exhausted. I couldn't figure it out. Please help me.
1) list element width=16.666% is only taking full screen width if i give class "nav-bar" width = 100%. But it's not working if give only either class"header" or if i select ul and give width =100%. why?
2) why media query is not working as expected in 768px width, if hover on Menu1 and Menu2. Menu's are moving around. But it's malfunction only for Menu1 and Menu2.
3) How to give the equal margin for menus with using of full available space.

Code: Select all

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="CSS/style.css">
  <title>Responsive Website</title>
</head>
<body>
  <div class="header">
      <nav class="nav-bar">
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
          <li><a href="#">Menu4</a></li>
          <li><a href="#">Menu5</a></li>
          <li><a href="#">Menu6</a></li>
        </ul>
    </div>
  </div>
</body>
</html>

Code: Select all

body{
  margin: 0;
}
.header{
  height: 200px;
  background-color: #fb587d;
  position: relative;
}
.nav-bar{
  position: absolute;
  width: 100%;
  top: 162px;
}
.nav-bar ul{
  margin: 0;
  padding: 0;
}
.nav-bar li{
  text-align: center;
  width: 16.666%;
  list-style: none;
  float: left;
}
.nav-bar a{
  padding: 10px 20px;
  display: block;
  text-decoration: none;
  background-color: #000;
  color: #fff;
}
.nav-bar a:hover{
  background-color: #fff;
  color: #000;
}
.nav-bar li:hover{
  border-bottom: 2px solid #fb587d;
}
@media only screen and (max-width:768px) {
  .nav-bar li{
    width: 33.333%;
  }
}