Así que intenté agregar un número de teléfono en los lugares correctos de mi sitio, pero el estilo no es correcto. El problema con el que me encuentro es la pantalla del móvil. El logotipo no se centrará y el número de teléfono no se mostrará en línea en la barra de navegación.

Lo que estoy tratando de lograr:

escritorio móvil

Lo que tengo:

http://lakeozarkelectrician.com/

Css:

// -------------- Mobile -------------- //

@media screen and (max-width: 480px) {
.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;
}
a[href^="tel:"] {
    color: white;
    text-decoration: none;
    float: none;
}
}

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

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

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

Encabezamiento:

<body <?php body_class(); ?>>

<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 d-block hidden-md">
                <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; ?>

        <span class="navbar-text d-inline-block d-sm-none">
        <i class="fa fa-phone"></i>
                <a href="tel:636-244-9045">636-244-9045</a>
        </span>

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

   </div><!-- .wrapper-navbar end -->
</div>
</header>
</div>
0
Tom Beckerle 12 nov. 2017 a las 00:03

2 respuestas

La mejor respuesta

Puedes probar con esto:

@media screen and (max-width: 480px) {
.navbar-brand {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;

    margin-left: auto;   // <-- add this
    margin-right: auto;  // <-- add this
    display: table;      // <-- add this

}

#telephone{display:none;}    // <-- add this

.navbar > .container + span{ // <-- add this
    position: absolute;      // <-- add this
    right: 15px;             // <-- add this
    top: 10px;               // <-- add this
}                            // <-- add this

}
0
BENARD Patrick 11 nov. 2017 a las 21:25

Lo siento porque sé que es viejo pero puede ser útil, puedes falsificar un contenedor como el siguiente y agregar lo que quieras

<div id="navbarNavDropdown" class="collapse navbar-collapse"><?php wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'container'    => false,
                'menu_class'      => 'navbar-nav',
                'fallback_cb'     => '',
                'menu_id'         => 'main-menu',
                'walker'          => new WP_Bootstrap_Navwalker(),
            )
        ); ?><span class="nav-item">MY NEW ITEM</span></div>
0
Amihan co 16 abr. 2019 a las 15:40