Bootstrap and Wordpress position of navbar and logo

Question

So I've tried adding a phone number to the correct places on my site, but it's not styling correctly. The problem I'm running into is the mobile display. The logo will not center, and the phone number is not showing inline in the navbar.

What I'm trying to achieve:

desktop mobile

What I have:

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;
}

Header:

<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>

Answer 1

You can try with this :

@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

}

Answer 2

sorry because i know that its old but may useful u can false container like below and add what ever you want

<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>

Bootstrap and Wordpress position of navbar and logo

Question

2 answers

solution1
0 ACCPTED 2017-11-11 21:25:22

solution2
0 2019-04-16 15:40:40

Bootstrap and Wordpress position of navbar and logo

Question

2 answers

solution1 0 ACCPTED 2017-11-11 21:25:22

solution2 0 2019-04-16 15:40:40

solution1
0 ACCPTED 2017-11-11 21:25:22

solution2
0 2019-04-16 15:40:40