خانه / وردپرس / آموزش وردپرس / ایجاد یک منوی ناوبری شناور در وردپرس

تاریخ انتشار: می 6, 2017 تعداد بازدید: 145 بازدید تعداد دیدگاه ها: 0

ایجاد یک منوی ناوبری شناور در وردپرس

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

روش اول: اضافه کردن منوی ناوبری شناور با استفاده از پلاگین
این روش ساده تر است و برای همه کاربران توصیه می شود. اولین کاری که باید انجام دهید نصب و فعال سازی پلاگین Sticky Menu (or Anything!) on Scroll است.

پس از فعال سازی باید به قسمت تنظیمات » صفحه پیکربندی تنظیمات پلاگین Sticky Menu (or Anything!) بروید.

ابتدا شما باید شناسه Css مدل منوی ناوبری دلخواه را وارد کنید. شما باید با استفاده از مرورگر شناسه Css منوی ناوبری را پیدا کنید.

نگران نباشید، بسیار ساده هست. ابتدا به وب سایت خود مراجعه کرده و روی منوی ناوبری راست کلیک کرده و Inspect  را انتخاب کنید.

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

<nav id="site-navigation" class="main-navigation" role="navigation">

در این مثال شناسه Css ناوبری site-navigation است.

حالا باید شناسه Css را به صورت زیر وارد کنید.

site-navigation#

گزینه بعدی در صفحه تنظیمات پلاگین به شما اجازه می دهد تا فضایی را در قسمت بالا در نظر بگیرید. اگر چیزی در ابتدای سطر دارید که میخواهید دیده شود باید این تنظیمات را اعمال کنید، در غیر این صورت تنظیمات را نادیده بگیرید.

بعد از آن شما باید روی چک باکس کنار گزینه ی Check for Admin Bar کلیک کنید. این اجازه می دهد تا کاربران وارد شده توانایی دسترسی برای افزودن فضا در نوار وردپرس را داشته باشند.

گزینه بعدی اجازه می دهد تا زمانی که کاربر شما از وسیله ی کوچکتری برای بازدید از سایت استفاده می کند، منوی ناوبری شناور غیر فعال شود. برای مثال گوشی همراه…

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

فراموش نکنید در پایان تنظیمات را ذخیره کنید.

اکنون می توانید وارد وب سایت خود شده و منوی ناوبری شناور را مشاهده فرمایید.

روش دوم: اضافه کردن منوی ناوبری شناور به صورت دستی

در این روش نیاز است کد CSS  سفارشی خود را به تم اضافه کنید. در ابتدا شما باید به قسمت Appearance » Customize بروید.

با کلیک به روی دکمه Additional CSS در قسمت چپ و سپس اضافه کردن این کد Css.

01 #site-navigation {
02     background:#fff;
03     height:60px;
04     z-index:170;
05     margin:0 auto;
06     border-bottom:1px solid #dadada;
07     width:100%;
08     position:fixed;
09     top:0;
10     left:0;
11     right:0;
12     text-align: center;
13 }

جایگزین کردن #site-navigation و شناسه Css از منوی ناوبری و بعد ذخیره کردن و زدن دکمه انتشار.

شما هم اکنون می توانید به وب سایت خود مراجعه کرده و منوی ناوبری شناور خود را مشاهده کنید. اگر منوی ناوبری با هدر سایت به مشکل خورده است می توانید از کد زیر استفاده کنید. این کد باعث می شود تا یک حاشیه برای منطقه هدر در Css تنظیم شود:

1 .site-branding {
2 margin-top:60px;
3 }

می توانید site-branding را برای تنظیم هدر ایجاد کنید.

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

هنوز دیدگاهی ثبت نشده است.