WordPress의 모바일 센터 로고

Question

mobile 저는 워드 프레스에서 모바일의 로고를 중심으로 보았으며 아무 것도 찾을 수 없습니다. 여기에 제가 스타일을 꾸몄습니다 ...

휴대 전화의 번호를 모바일의 navbar로 옮기고 싶지만 한 번에 한 걸음 씩, 그렇지 않습니까? 어떤 도움을 주셔서 감사합니다 ...

더 많은 코드로 업데이트되었습니다. 내 사과. 내 미디어 쿼리가 적용되는지 확실하지 않습니다. 파이어 폭스에서 테스트를 해본 결과 4 가지 스타일 중 2 가지 만 보여 주었다. 그게 정상인가요? float right 및 font-size가 표시되지 않습니다.

다른 사이트 섹션을 더 쉽게 만들 수 있다면 좋겠다. 나는 WordPress에서 모든 것을 할 수 있으며 기능이 마음에 든다. 또한 PHP를 다루기 전에 CSS를 이해하고 싶습니다.

@media screen and (max-width: 480px) { 
    a[href^="tel:"] { 
     color: black; 
     text-decoration: none; 
     float: none; 
    } 
    .navbar-brand { 
     margin: 0 !important; 
    } 

}

// ------------- Telephone Styling ------------ // 

#telephone { 
    text-align: center; 
    margin-top: 15px; 
    font-size: large; 
    float: right; 
} 

a[href^="tel:"] { 
    color: black; 
    text-decoration: none; 
    display: inline; 
} 


<div class="hfeed site" id="page"> 

<!-- ******* Header ******* --> 
<header> 
    <div class="wrapper-fluid"> 

<!-- Your site title as branding in the menu --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <?php if (! has_custom_logo()) { ?> 

        <?php if (is_front_page() && is_home()) : ?> 

         <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a></h1> 

        <?php else : ?> 

         <a class="navbar-brand" rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a> 

        <?php endif; ?> 


       <?php } else { 
        the_custom_logo(); 
       } ?> 
      </div> 
<!-- end custom logo --> 
      <div class="col-md-6"> 
       <div id="telephone"> 
       <p>Call Now<br> 
        <i class="fa fa-phone"></i> 
       <a href="tel:636-244-9045">636-244-9045</a></p> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- ******************* The Navbar Area ******************* --> 
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar"> 

    <a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e('Skip to content', 
    'understrap'); ?></a> 

    <nav class="navbar navbar-expand-md navbar-dark bg-dark"> 

    <?php if ('container' == $container) : ?> 
     <div class="container"> 
    <?php endif; ?> 

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 

      <!-- The WordPress Menu goes here --> 
      <?php wp_nav_menu(
       array(
        'theme_location' => 'primary', 
        'container_class' => 'collapse navbar-collapse', 
        'container_id' => 'navbarNavDropdown', 
        'menu_class'  => 'navbar-nav', 
        'fallback_cb'  => '', 
        'menu_id'   => 'main-menu', 
        'walker'   => new WP_Bootstrap_Navwalker(), 
       ) 
      ); ?> 
     <?php if ('container' == $container) : ?> 
     </div><!-- .container --> 
     <?php endif; ?> 

    </nav><!-- .site-navigation --> 

    </div><!-- .wrapper-navbar end --> 
</div> 
    </div> 
</header> 

Answer 1

나는 당신의 웹 사이트를 확인하고 난 당신의 문제가있어.

당신은 .navbar-brand이 코드가 있습니다

display: inline-block; 
padding-top: .3125rem; 
padding-bottom: .3125rem; 
margin-right: 1rem; 
font-size: 1.25rem; 
line-height: inherit; 
white-space: nowrap; 

을 그리고 문제는 display: inline-block; 및 margin-right: 1rem;이 두 로고를 중앙에 당신의 행동을 중지하는과이다.

그래서 이런 .navbar-brand 교체 :

padding-top: .3125rem; 
padding-bottom: .3125rem; 
font-size: 1.25rem; 
line-height: inherit; 
white-space: nowrap; 

그리고 코드가 .img-fluid 내부의 로고를 중앙에이 확실히 작동

display: block; 
margin: 0 auto; 

. 당신이 이해하기를 바랍니다.

Answer 2

시도 :

.navbar-brand { 
    display: block; 
    text-align: center; 
}