منوی ریسپانسیو با pure css

البته منو ریسپانسیو هست و در موبایل و تبلت نمایش داده نمیشه ، مشکل در ریسایز مرورگر هست

یعنی هیچ کسی نبود کمک کنه ؟

سلام
کدهای خودتون رو همراه با عکس از خروجی قرار بدین.

عکس از خروجی
http://uupload.ir/files/hur0_111.jpg

کدهای استایل

.container-menu-top{
    margin: auto 350px;
}
.main-top-menu{
    width: 100%;
    background-color: rgba(92,92,92,1);
    float: right;
}
.main-top-menu ul{
    list-style-type: none;
    background-color: #5c5c5c;
    margin: 0;
    padding: 0;
    overflow: auto;
    text-decoration:none;
}
.main-top-menu li{
    display: inline;
    float: right;
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,.25);
    border-right-width: 1px;
    border-right-style: solid;
    line-height:38px;
    padding:0 10px;
}
.main-top-menu li a:hover{
    color: #dedede;
}
.main-top-menu li a{
    text-decoration: none;
    color: #fff;
}
.main-top-menu li:first-child{
    border: 0;
}
.main-top-menu .right-menu{
    width: 50%;
    float: right;
    font-size: 13px;
}
.main-top-menu .left-menu{
    width: 50%;
    float: left;
    color: #fff;
    font-size: 12px;
}
.container-left{
    float: left;
}
@media (max-width:1700px){
    ul li{
        float: none;
        display: block;
    }
}

دوست گرامی
کدهاتون رو درست قرار بدین، الان بهم ریخته هستش.
کدهای html رو هم بزارید.

اگر فقط می خواید مخفی بشه هم خب، یک شرط ساده در ابعاد مدنظرتون با mediaquery میذارید و داخلش display: none می کنید.

بله فقط میخوام وقتی به عرض 1200px رسید hidden بشه
میشه بیشتر توضیح بدید

@milad
کدهای html

<div class="main-top-menu hidden-xs">  
<div class="container-menu-top">  
<div class="right-menu">  
<ul>  
<li>test 1</li>  
<li>test 2</li>  
<li>test 3</li>  
<li>test 4</li>  
</ul>  
</div>  
<div class="left-menu">  
<div class="container-left">  
<ul>  
<li><a href="#">تماس با ما</a></li>  
<li><a href="#">سوالات متداول</a></li>  
<li><a href="#">درباره ما</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>

لطفا کد های خودتون رو بین دو سری ``` قرار بدهید تا بهتر نمایش داده شود.
راهنما قرار دادن کدها: https://roocket.ir/articles/learn-use-markdown
بعدش در خدمتم.

@milad
انجام شد.

ممنون از شما

کافیه از دستورات mediaquery کمک بگیرید. برای این مورد اینجوری میشه:

@media only screen and (max-width: 1200px) {
                .main-top-menu{
                    display: none;
                }               
            }

یعنی وقتی عرض مرورگر به 1200 پیکسل یا کمتر میرسه، نمایش داده نشه.

@milad
ممنون از توجه و پیگیری شما
به خوبی کار کرد
یک سوال دیگه هم داشتم چطور میتونم به این منو فقط از زیر padding بدم که از لوگو فاصله بگیره و به لوگو نچسبه ؟

خواهش می کنم، زنده باشی.

مثلا می تونید به عنصر .main-top-menu حاشیه ی پایینی بدین:

.main-top-menu {
      margin-bottom: 30px
}

یا اینکه برعکس کار کنید و به نگهدارنده ی سطر ِ لوگو تون padding بدین.

مبحث دستورات mediaquery رو هم سعی کنید مورد مطالعه قرار بدین، چون مطمئنا لازم تون میشه و جز موارد اساسی هستش.
https://www.w3schools.com/Css/css3_mediaqueries.asp
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

فارسی:
http://css-tricks.ir/reference/media/
https://css-tricks.ir/reference/media-queries/

@milad
میشه کاری کرد که این منو وقتی صفحه مرورگر رو ریسایز میکنیم هم عرض سایت تغییر اندازه بده ؟

• در حالتی که مرورگر ریسایز نشده ، این منو هم عرض سایت هست ، اما بعد از ریسایز مرورگر عرض منو دیگه هم عرض سایت نیست
  برای اینکه درک بهتری داشته باشید اسکرین شات ضمیمه شد ( داخل اسکرین شات با فلش قرمز رنگ مشخص کردم)
  http://uupload.ir/files/p2ne_menu-box.jpg

بله، مطمئنا میشه.
شما باید سطر فهرست تون رو با سطر پایینی که مربوط به جستجو-لوگو میشه هماهنگ کنید.

احتمالا در اینجا حاشیه اضافی دادید که با سطر پایینی هماهنگ نیستش:

.container-menu-top{
    margin: auto 350px;
}

این دوتا رو هم، نیازی نیست که عرض 50 درصد بهشون بدین:

.main-top-menu .right-menu{
    width: 50%;
    float: right;
    font-size: 13px;
}
.main-top-menu .left-menu{
    width: 50%;
    float: left;
    color: #fff;
    font-size: 12px;
}

بعلاوه بهتون توصیه می کنم دوره ی flexbox موجود در سایت رو ببینید، به کمک این دوره با بکارگیری خصوصیت flexbox, جریان کاری و قرارگیری عناصر رو خیلی بهتر می تونید مدیریت کنید.

@milad

.container-menu-top{
    margin: auto 350px;
}

این حاشیه واسه این هست که در حالت تمام عرض مرورگر ، منویی که برای بالای سایت درست کردم هم عرض قسمت پایین سایت باشه
اسکرین شات رو مشاهده کنید: http://uupload.ir/files/j2e6_222.jpg

اما زمانی مشکل به وجود میاد که عرض مرورگر رو کم میکنم ، این منو کوچیکتر از عرض قسمت پایین سایت میشه :
اسکرین شات رو مشاهده کنید: http://uupload.ir/files/p2ne_menu-box.jpg

ممنونم

کدهاتون رو ناقص می ذارید، خب من نمی دونم بصورت کلی چه کردین.

کد های html , css مربوط به سطر اول و سطر دوم رو قرار بدین تا بتونم راهنمایی تون کنم.

کافیه شما این دوتا سطر رو مشابه هم حاشیه بدین، مشابه هم نگهدارنده بزارید براش، یا اینکه هردو سطر رو داخل یک نگهدارنده قرار بدین.
مسئله ی پیچیده ای نیستش.

عزیز جان اینطوری که نمیشه متوجه شدش کدوم به کدومه.
شما بهتره بکمک inspect element خود مرورگر، تشخیص بدین سطر دوم تون رو، بعدش این نگهدارنده ی <div class="container-menu-top"> رو براش قرار بدین.

من انقدری به وردپرس تسلط ندارم. نمی دونستم کدهاتون قراره تبدیل بشن.