WordPress - Добавление кнопки в область заголовка

Question

Я пытаюсь добиться следующего с помощью пользовательской кнопки:

Desktop:

Мобильный телефон:

Пожалуйста, дайте мне знать, как это сделать на моем сайте WordPress. С помощью этой кнопки я пытаюсь добиться: на рабочем столе кнопка всегда отображается. На мобильном телефоне кнопка всегда отображается рядом с 3-строчным меню. В настоящее время мой сайт показывает синюю кнопку внутри 3-строчного меню на мобильном телефоне. Я бы хотел, чтобы эта кнопка всегда отображалась вне этого меню рядом с 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>