× Tip and Trick, Solved Solution and bug fix for Joomla Website

เปลี่ยนปุ่มเมนูตอนหน้าจอแคบ Joomla Protostar

เพิ่มเติม
3 ปี 11 เดือน ที่ผ่านมา - 3 ปี 11 เดือน ที่ผ่านมา #17 โดย admin
เปลี่ยนปุ่มเมนูตอนหน้าจอแคบ Joomla Protostar Template ปกติเวลาความกว้างหน้าจอหดลงมา แถบเมนูจะเปลี่ยนรูปแบบแสดงผลหดลงตามหลายเป็นปุ่มเมนู แต่ไม่มีขอความอะไรบอก เราก็สามารถทำการเปลี่ยน รูปภาพพื้นหลังปุ่มให้กลายไปเป็นข้อความแทน ด้วยการแก้ไข file index.php ของ Protostar template
จาก
<nav class="navigation" role="navigation">
    <div class="navbar pull-left">
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>
ไปเป็น
<nav class="navigation" role="navigation">
    <div class="navbar pull-left">
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            MENU
        </a>
    </div>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>

ส่วนสีพื้นหลังของปุ่มก็สามารถเปลี่ยนให้เป็นสีเดียวกับ theme ของ template ได้ด้วยการเพิ่ม code .navigation a.btn ในส่วนของ <head> ของ file index.php ตามนี้
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-primary, .navigation a.btn
{
    background: <?php echo $this->params->get('templateColor'); ?>;
}

Source: How to change the look of the Menu Button for narrow screens
Last edit: 3 ปี 11 เดือน ที่ผ่านมา by admin.

กรุณา เข้าสู่ระบบ หรือ สมัครสมาชิกใหม่ เพื่อเข้าร่วมวงสนทนา

เวลาที่ใช้ในการสร้างหน้าเว็บ: 0.059 วินาที
ขับเคลื่อนโดย ระบบฟอรัม Kunena