---
title: "طراحی منو با اسکرول افقی در موبایل توسط المنتور"
url: "https://elementorfa.ir/horizontal-scrollable-mobile-menu/"
type: "post"
published: "2020-06-02T16:08:42+04:30"
modified: "2025-06-28T00:15:55+03:30"
author: "المنتور فارسی"
---

4.8/5 - (14 امتیاز)

طراحی منو سایت در المنتور به راحتی و با استفاده از ویجت فهرست ناوبری قابل انجام است.

در گزینه های این ویجت، می توانید منو را در حالت های مختلف عمودی، افقی و کشویی قرار دهید.

زمانی که حالت منو را در حالت افقی قرار می دهید، در حالت موبایل زیر هم رفته و فضای بیشتر را اشغال می کنند. همچنین ظاهار صفحه را به هم میریزد.

در این آموزش قصد داریم تا توسط کد CSS و ویجت فهرست ناوبری المنتوری، یک منوی قابل اسکرول به صورت افقی ایجاد کنیم.



## منو با اسکرول افقی در موبایل

### ویجت فهرست ناوبری

وارد صفحه مورد نظر شده و **ویجت فهرست ناوبری** را قرار دهید.

روی ویجت فهرست ناوبری کلیک کرده و تنظیمات زیر را قرار دهید:

![](https://elementorfa.ir/wp-content/uploads/2020/05/mobile-menu-scroll.png)

حالا منو در حالت موبایل به شکل زیر نشان داده خوهد شد:

![منوی افقی در المنتور](https://elementorfa.ir/wp-content/uploads/2020/05/mobile-menu-elementor-scroll.png)

برای اینکه منو را به صورت خطی و قابل اسکرول قرار دهیم،به تب پیشرفته ویجت فهرست ناوبری رفته و در تب CSS سفارشی کد زیر را قرار دهید:

```
selector ul {
display: flex;
flex-wrap: nowrap;
white-space:nowrap;
overflow-x: auto;
}
```

صفحه را ذخیره کنید. وارد صفحه مورد نظر شده و در حالت موبایل مشاهده کنید.



امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید، اگر مشکلی توی پیاده سازی این طرح دارید، از بخش نظرات با ما در میان بگذارید.