Responsive nav bar for all screens-CodePudding

I am developing a WordPress website. I already edited the navbar and added some custom CSS. I will include my custom CSS below.

/** Header Customization start **/

@media screen and (min-width:1024px){ .header_area_container{
    background:white;
} 

 .wgl-header-row_wrapper{
    background:white;
} 

.menu-item-1782{
    background:#35a07b;
    margin-left: 250px;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1810{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1784{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1805{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1832{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1826{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.side_panel .side_panel_inner .side_panel-toggle{
/*  color:black; */
    margin-top:400px;

}

#menu-main-1{
    margin-left:140px
}


}
/** Header Customization end **/

The problem with this CSS is I have to adjust the width of the header for separate screen versions manually and that's not a good industry standard. How can I make this responsive? I want to align my menu tabs automatically for all the desktop/laptop screen sizes.

CodePudding user response：

@media screen and (min-width:1024px){ .header_area_container{
    background:purple;
} 

 .wgl-header-row_wrapper{
    background:white;
} 

.menu-item-1782{
    background:#35a07b;
    margin-left: 250px;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1810{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1784{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1805{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1832{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.menu-item-1826{
    background:#35a07b;
    border-left: 1px solid white;
  height: 500px;
}

.side_panel .side_panel_inner .side_panel-toggle{
 color:black; 
    margin-top:400px;

}

#menu-main-1{
    margin-left:140px
}


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav >
        <a  href="#">Navbar</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
      
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  href="#">Home <span >(current)</span></a>
            </li>
            <li >
              <a  href="#">Link</a>
            </li>
            <li >
              <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div  aria-labelledby="navbarDropdown">
                <a  href="#">Action</a>
                <a  href="#">Another action</a>
                <div ></div>
                <a  href="#">Something else here</a>
              </div>
            </li>
            <li >
              <a  href="#">Disabled</a>
            </li>
          </ul>
          <form >
            <input  type="search" placeholder="Search" aria-label="Search">
            <button  type="submit">Search</button>
          </form>
        </div>
      </nav>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>