Question

我正在尝试通过自定义按钮实现以下目标：

桌面：

手机：

请让我知道如何在我的WordPress网站上进行此操作。我要使用此按钮尝试实现的功能是：在桌面上，该按钮始终显示。在移动设备上，该按钮始终显示在三行菜单旁边。目前，我的网站在手机的3行菜单中显示了蓝色按钮。我希望此按钮始终在此菜单外部，三行菜单旁边显示，如上所示。谢谢！

感谢您的帮助。

Answer 1

以下是修改移动设备标题的代码：

<?php
    $scroll_trigger = get_option('stack_scroll_trigger', '200px');
    $mobile_scroll_trigger = get_option('stack_mobile_scroll_trigger', '200px');
    $scroll = ( 'yes' == get_option('stack_scroll_header', 'yes') ) ? 'data-scroll-class="'. $scroll_trigger .':pos-fixed"' : false;
    $mobile_scroll = ( 'yes' == get_option('stack_scroll_mobile_header', 'yes') ) ? 'data-scroll-class="'. $mobile_scroll_trigger .':pos-fixed"' : false;
    $mobile_scroll_class = ( 'yes' == get_option('stack_scroll_mobile_header', 'yes') ) ? 'bar--mobile-sticky' : false;

    $background = get_option('stack_header_background', 'original--bg');
?>

<div class="nav-container">

    <div class="bar bar--sm visible-xs <?php echo esc_attr($background); ?> <?php echo esc_attr($mobile_scroll_class); ?>" <?php echo wp_kses_post($mobile_scroll); ?>>
        <div class="container">
            <div class="row">
                <div class="col-xs-4 col-sm-10">
                    <?php get_template_part('inc/content-header', 'logo'); ?>
                </div>
                <div class="col-xs-8 col-sm-2 text-right mobile-header">
                    <?php 
                        if( class_exists('woocommerce') && 'yes' == get_option('stack_header_mobile_cart', 'yes') ){
                            get_template_part('inc/content-header', 'woocommerce');
                        }
                    ?>
                    <a class="hidden-md hidden-lg btn btn--sm btn--primary type--uppercase" href="#" target="">
                        <span class="btn__text">become a technician</span>
                    </a>
                    <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs">
                        <i class="icon--sm stack-interface stack-menu"></i>
                    </a>
                </div>
            </div><!--end of row-->
        </div><!--end of container-->
    </div><!--end bar-->

    <nav id="menu1" class="bar bar--sm bar-1 hidden-xs hiddem-sm bar--transparent bar--absolute <?php echo esc_attr($background); ?>" <?php echo wp_kses_post($scroll); ?>>
        <div class="container">
            <div class="row">
                <div class="col-md-1 col-sm-2 hidden-xs">
                    <div class="bar__module">
                        <?php get_template_part('inc/content-header', 'logo'); ?>   
                    </div><!--end module-->
                </div>
                <div class="col-md-11 col-sm-12 text-right text-left-xs text-left-sm">
                    <?php get_template_part('inc/content-header', 'nav'); ?>    
                    <?php get_template_part('inc/content-header', 'buttons'); ?>
                </div>
            </div><!--end of row-->
        </div><!--end of container-->
    </nav><!--end bar-->

</div>

WordPress-在标题区域添加按钮

1 个答案: