6 پست در این موضوع قرار دارد

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

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

اما

این زیر منو ها کنار هم چیده می شوند.

لطفا سایت رو مشاهده کنید

hb2018.ir

 

من میخوام که این زیر منو ها ، زیر هم قرار بگیرند نه کنار هم

لطفا راهنمایی کنید

با عرض پوزش با کد نویسی آشنایی ندارم. کد بخش mega meno رو از قسمت style.css  براتون در زیر آوردم.

لطفا اگر نیاز به ویرایش داره راهنمایی کنید

#top-menu{
	-webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.2);
	-moz-box-shadow: 1px 1px 7px rgba(0,0,0,.2);
	box-shadow: 1px 1px 7px rgba(0,0,0,.2);
}
.navbar,
.dropdown-menu,
.navbar .nav>li>a,
.dropdown-menu>li>a,
.nav{
	font-size: 14px;
}
.navbar-brand {
	font-size: 15px;
}
.megamenu>li>a,
.navbar .navbar-nav>li>a {
	padding-right: 5px;
	padding-left: 5px;
}
.megamenu .menu-item-description {
	text-indent: 20px;
}
.megamenu .submenu-link {
	margin-bottom: 5px;
	padding: 5px;
}
.megamenu .dropdown-menu {
	padding-top: 10px;
}
.megamenu .dropdown-menu * {
	z-index: 10000;
	-webkit-backface-visibility: hidden; /* fix for chrome white flash */
}
.megamenu .dropdown-menu a.submenu-title-link:hover,
.megamenu .dropdown-menu a.submenu-child-link:hover{
	font-weight: bold;
	padding-right: 0;
	padding-left: 10px;
}
.dropdown-menu {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
}
.megamenu .dropdown {
	position: static !important;
}
.megamenu .dropdown-menu a,
.megamenu .menu-item-description{
	display: block;
}
.megamenu .dropdown-menu * {
	white-space: nowrap;
}
@media screen and ( min-width: 768px ) {
	.megamenu > li.dropdown:hover > ul.dropdown-menu,
	.megamenu .open > .dropdown-menu {
		left: auto;
		display: table;
		border-right: 2px solid red;
		max-width: 85%;
	}
	.megamenu .menu-col {
		display: table;
	}
}
@media screen and ( max-width: 768px ) {
	.megamenu .nav{
		display: initial;
	}
	.megamenu .open > .dropdown-menu {
		display: block;
	}
	.megamen .dropdown-menu li {
		display: block;
	}
}
.navbar-right.megamenu .dropdown-menu {
	left: auto;
	right: 1;
}

#bottom-navbar-collapse{
	text-align: center;
}
#bottom-navbar-collapse .navbar-nav{
	display: inline-block;
	float: none;
}
#bottom-navbar-collapse .navbar-nav>.active>a {
	background-color: inherit;
	background-image: inherit;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

 

0

به اشتراک گذاری این پست


لینک به پست

@javadmezgi

سلام 

به انجمن خوش آمدید.

برای حل مشکل و نمایش زیر منو ها در یک خط لطفا این کد رو به فایل style.css قرار بدید. save کنید و خروجی رو مشاهده کنید.

.megamenu .menu-col {
    display: contents !important;
}

 

 

1

به اشتراک گذاری این پست


لینک به پست
در 34 دقیقه قبل، m4xs051 گفته است :

@javadmezgi

سلام 

به انجمن خوش آمدید.

برای حل مشکل و نمایش زیر منو ها در یک خط لطفا این کد رو به فایل style.css قرار بدید. save کنید و خروجی رو مشاهده کنید.


.megamenu .menu-col {
    display: contents !important;
}

 

نقل قول

با سلام و احترام و تشکر از اینکه وقت گذاشتید.

بنده کد مورد نظر را در مکانی که گفتید قرار دادم. اما تغییر به عمل نیامد.

لطفا اگر می توانید بیشتر راهنمایی نمایید 

با تشکر

 

 

0

به اشتراک گذاری این پست


لینک به پست

@javadmezgi

خواهش میکنم.

کد رو تو این فایل قرار بدید. ببینید جواب میده یا نه.

wp-content/themes/free-template/rtl.css

0

به اشتراک گذاری این پست


لینک به پست
در 41 دقیقه قبل، m4xs051 گفته است :

@javadmezgi

خواهش میکنم.

کد رو تو این فایل قرار بدید. ببینید جواب میده یا نه.

wp-content/themes/free-template/rtl.css

باسلام مجدد خدمت شما

کد مورد نظر را  قرار دادم و درست شد بی نهایت سپاس از شما

لطفا سایت را ببینید

hb2018.ir

زیر منو ها از سمت راست و چپ به خط قرمز چسبیده اند. آیا راهی است که کمی از خط فاصله بگیرند؟

باتشکر

1

به اشتراک گذاری این پست


لینک به پست

@javadmezgi

خواهش میکنم.

این کد رو هم تو مسیری که گفتم قرار بدید:

.megamenu .menu-col a {
    margin-right: 8px;
    margin-left: 8px;
}

 

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط bigarash
      سلام دوستان
      توی سایت ما چند وقتی هست که منو به هم ریخته، وقتی روی منو میری به شکل زیر بازش می کنه. در واقع ساب منو باید زیر منوی اصلی باز بشه که اینطوری شده الان. ممنون میشم اگر راهنمایی کنید. آدرس سایت simorghsafar dot com هستش. 

    • توسط kamalwp
      سلام
      دوستان من دارم یک قالب وردپرس طراحی میکنم که به منوها قابلیت background image اضافه کردم که مثلا برای هر منو یه بکگراند متفاوت داشته باشه
      حالا میخوام داخل فهرست های وردپرس برای منوها امکانی اضافه کنم که کاربر خودش بتونه از اونجا مثلا با یک دکمه تصویر خودش رو برای هر منو انتخاب کنه ولی متاسفانه نمیدونم چجوری باید ایکارو انجام بدم
       
      دوستان ممنون میشم راهنمایی کنید چون واقعا برای ضروریه
      اگر منبعی هم هست که این رو آموزش بده بازم ممنون میشم معرفی کنید
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، نمیدونم چرا وقتی صفحه مرورگر رو رفرش میکنم، تمام زیر منوها دیده میشه! کسی میدونه علت چیه.
      با اینکه من تگ ul رو diplay: none دادم.
      با تشکر و سپاس
    • توسط eh58san
      سلام روزتون بخیر استاتید محترم نیازمند پلاگین یا روشی برای ایجاد چنین منو هایی میباشم: لینک سایت  در صورتی که امکانش هست ممنون میشم راهنمایی فرمایید
       

    • توسط unid_user
      سلام و درود
      دوستان گرامی ، یه منو برای حالت موبایل ساختم که بنظرم خودم کدهاش کاملا درسته اما نمیدونم چرا وقتی روی li دوم از ul دوم هم کلیک میکنم. فرقی نمیکنه و تمام منو بسته میشه.
      لطفا ویدئو رو ببینید حتما متوجه منظورم میشید. حجم ویدئو 40 کیلوبایت هست.
      کدهای جی کوئری:
      $("span.mobile-nav-toggle").click(function() { $("nav#mobile-nav > ul").slideToggle(400); }); $("ul.mobile-nav-ul > li:has(ul)").addClass('dropdown'); $("ul.mobile-ul-1 > li:has(ul)").addClass('dropdown'); $("ul.mobile-nav-ul > li.dropdown").click(function() { $(" > ul.mobile-ul-1", this).slideToggle(400); }); $("ul.mobile-ul-1 > li.dropdown").click(function() { $(" > ul.mobile-ul-2", this).slideToggle(400); });  
      nav menu.webm
      با تشکر و سپاس