mobile我到处寻找在WordPress中将徽标集中在移动设备上,我找不到任何东西。这就是我所说的......
我还希望电话号码能够移动到移动设备的导航栏中,但是一步一步,对吧?非常感谢任何帮助...
更新了更多代码。我很抱歉。我不确定我的媒体查询是否适用于evey。我在Firefox上进行了测试,它只显示了我使用过的四种风格中的两种。这是正常的吗?右侧浮动和字体大小未显示。
我希望如果我能把它钉在其他网站部分会更容易。我在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>
答案 0 :(得分:1)
尝试:
.navbar-brand {
display: block;
text-align: center;
}
答案 1 :(得分:0)
我检查了你的网站,我遇到了你的问题。
您有.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;
这肯定有用。希望你能理解。