aliali100

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

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

ارسال شده در (ویرایش شده)

با سلام

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

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

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

زمانیکه

<?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
0

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


لینک به پست

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

0

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


لینک به پست

سلام.

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

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

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

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

موفق باشید.

1

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


لینک به پست

سلام.

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

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

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

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

موفق باشید.

ممنون

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

ممنون

0

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


لینک به پست

سلام. خوب توضیح بدید که چی رو متوجه نشدید ؟ :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 دیگه و به اون استایل بده.

موفق باشید.

2

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


لینک به پست

خب

در در 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 دیگه و به اون استایل بده.

موفق باشید.

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

0

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


لینک به پست

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

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

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

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


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

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

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


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