۳ ابوالفضل
مشکل منو در عرض کمتر از ۶۰۰px
جامعه Html & CSS ایجاد شده در ۱۵ آذر ۱۴۰۳

سلام 

همونطور که استاد تقریبا آخرهای فیلم گفت که ساختار منو رو درون div.cotainer و بعد درون div.row قرار بدیم تا اون ساختار گریدی که قبلا تعریف کرده بودیم اعمال بشه انجام دادم اما وقتی که مرور گر از 600px کمتر میشه دیگه مثل قبلا اون تگ a کلاس icon (همبرگر) دریک سطح با اون تگ a که اول از همه هست (کلاهه) نیست و پایین تره حالا شما اگر عرض رو کمتر از ۶۰۰ بیارید متوجه منظور من میشید 

https://codepen.io/hieujzmo-the-encoder/pen/xbKZOvy

اینم ساختارش در کدپن 

درود. علتش اینه که این دو المان در یک ردیف قرار ندارن. 

row اول شما که آیکون کلاه در اون هست بسته می‌شه و آیکون منو همبرگری در یک row دیگه قرار داره. 

سحر پاشائی ۱۷ آذر ۱۴۰۳، ۰۸:۲۴

https://codepen.io/hieujzmo-the-encoder/pen/PwYNvRO

تواین تیکه کد مشخصه که دوتاش در یک row قرار داره شاید منظور شما چیز دیگه ای هست لطفا راهنمایی کنید

ابوالفضل ۱۹ آذر ۱۴۰۳، ۰۶:۵۳

درود، ببینید الان تو این تصویر آیکون همبرگر منو و کلاه در عرض کم‌تر از 600px در یک سطح قرار گرفتن و مشکلی ندارن:

untitled-yxhw8oql.png

همین منظورتون هست؟
اگر بله کدهارو براتون می‌ذارم:

HTML:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://kit.fontawesome.com/7872cef268.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="../asset/css/style-grid.css" />
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <!-- start contact section -->
    <div class="container-fluid container-fluid-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 contact">
            <i class="fa-regular fa-envelope xs-hidden"
              ><span>va.salehi@gmail.com</span></i
            >
            <i class="fa-solid fa-phone"><span>091222222222</span></i>
          </div>
          <div
            class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 social-media"
          >
            <a href="" class="xs-hidden"
              ><i class="fa-brands fa-facebook-f"></i
            ></a>
            <a href=""><i class="fa-brands fa-instagram"></i></a>
            <a href="" class="xs-hidden"><i class="fa-solid fa-rss"></i></a>
            <a href=""><i class="fa-brands fa-telegram"></i></a>
            <a href="" class="xs-hidden"
              ><i class="fa-brands fa-twitter"></i
            ></a>
          </div>
        </div>
      </div>
    </div>
    <!-- end contact section -->
    <!-- start navbar section -->
    <nav class="nav" id="mynav">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <a href=""><i class="fa-solid fa-graduation-cap"></i></a>
            <a href="" class="active">خانه</a>
            <a href="">دوره‌های اموزشی</a>
            <a href="">درباره ما</a>
            <a href="">تیم ما</a>
            <a href="">مطالب</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunc();"
              ><i class="fa-solid fa-bars"></i
            ></a>
          </div>
        </div>
      </div>
    </nav>
    <!-- start navbar section -->
    <!-- start header section -->
    <header class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 red">
          <figure class="relative red">
            <div class="overlay absolute">
              <div class="header-title">
                <h1 class="mb-20">مبتکر اموزش نوین</h1>
                <h3 class="mb-20">
                  برگزار کننده دوره‌های برنامه نویسی ذیجیتال مارکتینگ
                </h3>
                <a href="">بیشتر بدانید...</a>
              </div>
            </div>
            <img
              class="img-header img-responsive"
              src="../asset/img/header.jpg"
              alt=""
            />
          </figure>
        </div>
      </div>
    </header>
    <!-- start header section -->
    <script src="../asset/js/main.js"></script>
  </body>
</html>


CSS:

@font-face {
  font-family: vazir;
  src: url("../font/Vazir-Medium.eot") format("eot"),
    url("../font/Vazir-Medium.woff") format("woff"),
    url("../font/Vazir-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: vazir;
}
a {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.red-color {
  background-color: red;
}
.blue-color {
  background-color: rgba(0, 0, 255, 0.639);
}
.green-color {
  background-color: green;
}
.yellow-color {
  background-color: yellow;
}
.gray-color {
  background-color: #eee;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.p-0 {
  padding: 0;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.img-responsive {
  width: 100%;
  height: auto;
}
.round-corner {
  border-radius: 5px;
}
.box-shadow {
  box-shadow: 0px 0px 2px 0px #000;
}
/* start contact section styles */
.container-fluid-custom {
  background-color: rgb(20, 20, 96);
  color: white;
}
.container-fluid-custom .contact {
  font-size: 15px;
  height: 40px;
}
.container-fluid-custom .contact i {
  color: orange;
  margin-right: 15px;
  vertical-align: -10px;
}
.container-fluid-custom .contact span {
  color: white;
  margin-left: 5px;
  vertical-align: 1px2;
}
.container-fluid-custom .social-media {
  direction: ltr;
}
.container-fluid-custom .social-media i {
  vertical-align: -10px;
  margin-left: 6px;
}
.container-fluid-custom .social-media a {
  color: white;
}
.container-fluid-custom .social-media i:hover {
  background-color: orange;
  padding: 10px;
}
/* start navbar section styles */
.active {
  border-bottom: 2px solid red;
}
.nav {
  background-color: #fff;
  overflow: hidden;
  box-shadow: 1px 1px 1px #efefef;
  position: sticky;
  top: 0;
}
.nav a {
  float: right;
  color: #1f1f1fee;
  text-align: center;
  padding: 14px 16px;
  font-size: 16px;
}
.nav a:hover {
  border-bottom: 2px solid red;
}
.icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    display: block;
    float: left;
  }
  .nav.responsive {
    position: relative;
  }
  .nav a.icon {
    position: absolute;
    top: 0;
    left: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}
/* start navbar section styles */
.container {
  clear: both;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.contaner-fluid {
  width: 100%;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class^="col-"] {
  float: right;
  padding-left: 15px;
  padding-right: 15px;
}
/* start header section styles */
div.row div.red {
  padding: 0;
}
.img-header {
  min-height: 90vh;
}
div.overlay {
  width: 100%;
  min-height: 90vh;
  background-color: rgba(0, 0, 0, 0.4);
}
.header-title {
  color: white;
  margin: 140px;
  max-width: 500px;
}
.header-title a {
  background-color: orange;
  padding: 5px 10px;
  border-radius: 3px;
  color: white;
  float: left;
  margin-left: 120px;
}
@media screen and (max-width: 980px) {
  figure {
    position: relative;
  }
  .header-title {
    width: 100%;
    margin: 0;
    background-color: rgba(225, 225, 225, 0.5);
    color: #000;
    border-radius: 5px;
    padding-bottom: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .overlay,
  .img-header {
    min-height: 0;
  }
}
@media screen and (max-width: 600px) {
  .header-title h1 {
    font-size: 20px;
  }
  .header-title h3 {
    font-size: 16px;
  }
}
/* end header section styles */
@media only screen and (max-width: 576px) {
  .xs-hidden {
    display: none;
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.666%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
  .col-xs-offset-0 {
    margin-right: 0;
  }
  .col-xs-offset-1 {
    margin-right: 8.33%;
  }
  .col-xs-offset-2 {
    margin-right: 16.66%;
  }
  .col-xs-offset-3 {
    margin-right: 25%;
  }
  .col-xs-offset-4 {
    margin-right: 33.33%;
  }
  .col-xs-offset-5 {
    margin-right: 41.66%;
  }
  .col-xs-offset-6 {
    margin-right: 50%;
  }
  .col-xs-offset-7 {
    margin-right: 58.33%;
  }
  .col-xs-offset-8 {
    margin-right: 66.66%;
  }
  .col-xs-offset-9 {
    margin-right: 75%;
  }
  .col-xs-offset-10 {
    margin-right: 81.33;
  }
  .col-xs-offset-11 {
    margin-right: 91.66%;
  }
  .col-xs-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.666%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-offset-0 {
    margin-right: 0;
  }
  .col-sm-offset-1 {
    margin-right: 8.33%;
  }
  .col-sm-offset-2 {
    margin-right: 16.66%;
  }
  .col-sm-offset-3 {
    margin-right: 25%;
  }
  .col-sm-offset-4 {
    margin-right: 33.33%;
  }
  .col-sm-offset-5 {
    margin-right: 41.66%;
  }
  .col-sm-offset-6 {
    margin-right: 50%;
  }
  .col-sm-offset-7 {
    margin-right: 58.33%;
  }
  .col-sm-offset-md {
    margin-right: 66.66%;
  }
  .col-sm-offset-9 {
    margin-right: 75%;
  }
  .col-sm-offset-10 {
    margin-right: 81.33;
  }
  .col-sm-offset-11 {
    margin-right: 91.66%;
  }
  .col-sm-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.666%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-offset-0 {
    margin-right: 0;
  }
  .col-md-offset-1 {
    margin-right: 8.33%;
  }
  .col-md-offset-2 {
    margin-right: 16.66%;
  }
  .col-md-offset-3 {
    margin-right: 25%;
  }
  .col-md-offset-4 {
    margin-right: 33.33%;
  }
  .col-md-offset-5 {
    margin-right: 41.66%;
  }
  .col-md-offset-6 {
    margin-right: 50%;
  }
  .col-md-offset-7 {
    margin-right: 58.33%;
  }
  .col-md-offset-8 {
    margin-right: 66.66%;
  }
  .col-md-offset-9 {
    margin-right: 75%;
  }
  .col-md-offset-10 {
    margin-right: 81.33;
  }
  .col-md-offset-11 {
    margin-right: 91.66%;
  }
  .col-md-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.666%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-offset-0 {
    margin-right: 0;
  }
  .col-lg-offset-1 {
    margin-right: 8.33%;
  }
  .col-lg-offset-2 {
    margin-right: 16.66%;
  }
  .col-lg-offset-3 {
    margin-right: 25%;
  }
  .col-lg-offset-4 {
    margin-right: 33.33%;
  }
  .col-lg-offset-5 {
    margin-right: 41.66%;
  }
  .col-lg-offset-6 {
    margin-right: 50%;
  }
  .col-lg-offset-7 {
    margin-right: 58.33%;
  }
  .col-lg-offset-8 {
    margin-right: 66.66%;
  }
  .col-lg-offset-9 {
    margin-right: 75%;
  }
  .col-lg-offset-10 {
    margin-right: 81.3xl;
  }
  .col-lg-offset-11 {
    margin-right: 91.66%;
  }
  .col-lg-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl-1 {
    width: 8.33%;
  }
  .col-xl-2 {
    width: 16.66%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.33%;
  }
  .col-xl-5 {
    width: 41.66%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.33%;
  }
  .col-xl-8 {
    width: 66.666%;
  }
  .col-xl-xl {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.33%;
  }
  .col-xl-11 {
    width: 91.66%;
  }
  .col-xl-12 {
    width: 100%;
  }
  .col-xl-offset-0 {
    margin-right: 0;
  }
  .col-xl-offset-1 {
    margin-right: 8.33%;
  }
  .col-xl-offset-2 {
    margin-right: 16.66%;
  }
  .col-xl-offset-3 {
    margin-right: 25%;
  }
  .col-xl-offset-4 {
    margin-right: 33.33%;
  }
  .col-xl-offset-5 {
    margin-right: 41.66%;
  }
  .col-xl-offset-6 {
    margin-right: 50%;
  }
  .col-xl-offset-7 {
    margin-right: 58.33%;
  }
  .col-xl-offset-8 {
    margin-right: 66.66%;
  }
  .col-xl-offset-9 {
    margin-right: 75%;
  }
  .col-xl-offset-10 {
    margin-right: 81.33;
  }
  .col-xl-offset-11 {
    margin-right: 91.66%;
  }
  .col-xl-offset-12 {
    margin-right: 100%;
  }
}
سحر پاشائی ۱۹ آذر ۱۴۰۳، ۱۲:۱۹