center navbar brand on small screen

Question

Center Navbar Brand on mobile devices. I can't seem to get my navbar brand centered on mobile device...I am trying to use media queries and flexbox attributes to no avail....Is this achievable with bootstrap classes or custom css??? Thanks! :)

<nav class="navbar navbar-expand-lg navbar-default fixed-top nav-menu navbar- 
light bg-white">
<div class="container">
<div class="header-border">
<a class="navbar-brand hidden-sm-down" href="index.html">
<img src="/images/logo.png" alt="masslogo">
</a>
<a class="navbar-brand-two hidden-md-up" href="index.html">
<img src="/images/mpsmall.png" alt="masssmalllogo">
</a>

</div>
<button class="navbar-toggler nav-button" type="button" data-toggle="collapse" data-target="#myNavbar">
<div class="bg-dark line1"></div>
<div class="bg-dark line2"></div>
<div class="bg-dark line3"></div>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
<li class="nav-item"><div class="dropdown"> <a class="nav-link m-2 dropdown-toggle"
href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"> Resources </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Knowledge base</a> <a class="dropdown-item"
href="#">Video tutorials</a> <a class="dropdown-item"
href="#">Forms</a> </div></div></li>
</ul>
<ul class="navbar-nav navbar-btns">
<a class="search" href="/search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img">
<title>Search</title>
<path d="M914.876 846.934l-226.894-226.92c93.082-124.27 83.508-301.176-29.516-414.14-61.952-61.97-143.146-92.954-224.366-92.954s-162.414 30.984-224.384 92.954c-123.922 123.922-123.922 324.812 0 448.768 61.97 61.934 143.146 92.936 224.366 92.936 66.918 0 133.624-21.368 189.772-63.402l226.952 226.936 64.07-64.178zm-480.794-190.038c-60.536 0-117.486-23.604-160.238-66.414-88.38-88.362-88.38-232.174-.018-320.538 42.828-42.812 99.72-66.398 160.298-66.398 60.536 0 117.486 23.56 160.256 66.398 88.32 88.38 88.32 232.174 0 320.538-42.87 42.81-99.762 66.414-160.298 66.414z">

</path></svg></a><li class="nav-item login"><a class="btn btn-success
btn-cust" href="https://masspay.myisolved.com/UserLogin.aspx?ReturnUrl=%2f"><span class="fa fa-user-circle mr-1"></span>Client Login</a></li></ul>
</div>

</nav>

Carol Skelly · Accepted Answer · 2018-08-24T15:41:18.787

Use the flex utility classes to align the Navbar components. You'll also need a hidden spacer to push the brand to center on mobile. Also note the display classes have changed from hidden-* to d-*...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="index.html">
            <img src="//placehold.it/100x30" alt="masslogo">
        </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="index.html">
            <img src="//placehold.it/40" alt="masssmalllogo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1" id="myNavbar">
        <ul class="navbar-nav ml-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
            <li class="nav-item">
                <div class="dropdown"> <a class="nav-link m-2 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Knowledge base</a> <a class="dropdown-item" href="#">Video tutorials</a> <a class="dropdown-item" href="#">Forms</a> </div>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav navbar-btns">
            <a class="search" href="/search">
                ...
            </a>
            <li class="nav-item login">
                ...
             </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/w13DoSZyVc

Similar questions:
Center an element in Bootstrap 4 Navbar
Bootstrap 4 Navbar align logo center and toggle icon on the left

Excellent! Worked Perfectly! – hendy0817 Aug 24 '18 at 18:11 — hendy0817, Aug 24 '18 at 18:11

center navbar brand on small screen

1 Answers1