رفتن به مطلب

مشکل در منوی ریسپانسیو


پست های پیشنهاد شده

با سلام

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

من یک مشکلی در منو دارم

من برای منو میخوام از فهرست دلخواه استفاده کنم

زمانیکه

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

کد رو جایگزین li های منوی خودم میکنم css منو بهم میریزه . هر کاری میکنم درست نمیشه

برای ریسپانسیو از بوتسترپ 3 استفاده کردم

این کد مربوط به منوی من

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">صفحه اصلي</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

اینم کد css منوی من

.navbar-default
{
background:#2c3e50;
border:none;
border-radius:0px;
}
.navbar-default .navbar-nav>li>a
{
color: #FFF;
font-family:'BYekan';
}
.navbar-default .navbar-nav>li>a:hover
{
color:#F0F;
}

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

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

رو جایگزین li میکنم css بهم میخوره

به خدا یک روز از صبح تا شب پاش بودم نتونستم درست کنم کلافه شدم

خواهشن اگه کسی بلد هستش راهنماییم کنه

ممنون

ویرایش شده توسط saman_kiyani
لینک به ارسال

واقعیت بعضی سئوالها جواب دادنشون زمان گیره وگر نه زیاد مشکلات پیچیده ای نیستند . مثلا ممکن مشکل شما اضافه بدون یک تگ یا یک سی اس اس اضافی باشه .

لینک به ارسال

سلام.

برای استفاده از منوی بوت استرپ باید از ناو واکر مخصوص استفاده کنید

https://github.com/t...strap-navwalker

آموزش کاملش توی همین صفحه هست.

دلیل اون به هم ریختگی این هست که li ها ی شما کلاس مخصوص رو ندارن توی ناو واکر آماده نویسنده این مورد و خیلی موارد دیگه رو برطرف کرده.

موفق باشید.

لینک به ارسال

سلام.

برای استفاده از منوی بوت استرپ باید از ناو واکر مخصوص استفاده کنید

https://github.com/t...strap-navwalker

آموزش کاملش توی همین صفحه هست.

دلیل اون به هم ریختگی این هست که li ها ی شما کلاس مخصوص رو ندارن توی ناو واکر آماده نویسنده این مورد و خیلی موارد دیگه رو برطرف کرده.

موفق باشید.

ممنون

به خدا من هیچی سر در نیاوردم از این میشه یه مقداری دربارش توضیح بدی؟

ممنون

لینک به ارسال

سلام. خوب توضیح بدید که چی رو متوجه نشدید ؟ :huh:

لینک خیلی واضح هست که .

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


<?php
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

?>

بعد فایل رو از همون صفحه دانلود کرده و میگذارید توی اون پوشه ی اصلی قالبتون. بعدش می رید به فایل هدر یا هر جایی که می خواید منو بگذارید بعد کد زیر رو دقیقا می ذارید جای منوتون :


<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>

بعدش دیگه کار تمومه ! البته اگر به منوتون استایل دادیده قبلا اون استایل رو حذف کنید بعد دقت کنید که اسامی کلاس ها باید همخوانی داشته باشه با مال bootstrap

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


<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$defaultsformenu = array(
'theme_location' => 'primary',
'menu' => '',
'container' => 'div',
'container_class' => 'nav-collapse collapse',
'container_id' => '',
'menu_class' => 'nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="nav">%3$s</ul>',
'depth' => 4,
'walker' => new wp_bootstrap_navwalker()
);
wp_nav_menu( $defaultsformenu ); ?>
</div>
</div>
</div>

شما دقیقا همینو بزار اسامی کلاس های div ها شو عوض نکن. بعد این رو بزار توی یک div دیگه و به اون استایل بده.

موفق باشید.

لینک به ارسال
  • 3 سال بعد...

خب

در در 10/9/2014 at 01:22، فرحان گفته است :

سلام. خوب توضیح بدید که چی رو متوجه نشدید ؟ :huh:

لینک خیلی واضح هست که .

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

 

 

<?php
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

?>

 

بعد فایل رو از همون صفحه دانلود کرده و میگذارید توی اون پوشه ی اصلی قالبتون. بعدش می رید به فایل هدر یا هر جایی که می خواید منو بگذارید بعد کد زیر رو دقیقا می ذارید جای منوتون :

 

 

<?php
		    wp_nav_menu( array(
			    'menu'			  => 'primary',
			    'theme_location'    => 'primary',
			    'depth'			 => 2,
			    'container'		 => 'div',
			    'container_class'   => 'collapse navbar-collapse',
	    'container_id'	  => 'bs-example-navbar-collapse-1',
			    'menu_class'	    => 'nav navbar-nav',
			    'fallback_cb'	   => 'wp_bootstrap_navwalker::fallback',
			    'walker'		    => new wp_bootstrap_navwalker())
		    );
?>

 

بعدش دیگه کار تمومه ! البته اگر به منوتون استایل دادیده قبلا اون استایل رو حذف کنید بعد دقت کنید که اسامی کلاس ها باید همخوانی داشته باشه با مال bootstrap

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

 

 

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
   <div class="container">
    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	 <span class="icon-bar"></span>
	 <span class="icon-bar"></span>
	 <span class="icon-bar"></span>
    </button>
    <?php
    $defaultsformenu = array(
	 'theme_location'  => 'primary',
	 'menu'		    => '',
	 'container'	   => 'div',
	 'container_class' => 'nav-collapse collapse',
	 'container_id'    => '',
	 'menu_class'	  => 'nav',
	 'menu_id'		 => '',
	 'echo'		    => true,
	 'fallback_cb'	 => 'wp_page_menu',
	 'before'		  => '',
	 'after'		   => '',
	 'link_before'	 => '',
	 'link_after'	  => '',
	 'items_wrap'	  => '<ul class="nav">%3$s</ul>',
	 'depth'		   => 4,
	 'walker'		  => new wp_bootstrap_navwalker()
    );
    wp_nav_menu( $defaultsformenu ); ?>
   </div>
  </div>
    </div>

 

شما دقیقا همینو بزار اسامی کلاس های div ها شو عوض نکن. بعد این رو بزار توی یک div دیگه و به اون استایل بده.

موفق باشید.

خب اوکیه ولی تو زیر منو هایی که داره اگه یه زیر منو هم بخواییم داشته باشیم نمیده
واسه اون چ باید کرد؟
در واقع منو های تو در تو

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...