Bootstrap 4 menu positioning with image - css

Question

I'm using this template:
http://bootstrap4.guide/
And I want to modify menu a bit, instead of having blue Bootstrap 4 text, I'd like to have a image there. It's looking all fine until I look at mobile view.
I'm expecting to have my image in the same place as the text:
However my image happens to appear under hamburger menu:
This is what I have at the moment:
<nav id='topNav' className='navbar navbar-default navbar-fixed-top'>
<div className='container'>
<button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
<div className='collapse navbar-toggleable-sm' id='collapsingNavbar'>
<ul className='nav navbar-nav'>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#one'>Cards</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#two'>Flexbox</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#three'>5 Tiers</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#four'>More</a>
</li>
</ul>
<ul className='nav navbar-nav pull-xs-right'>
<li className='nav-item'>
<a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'>About</a>
</li>
</ul>
</div>
</div>
</nav>
I've just replaced Bootstrap 4 with this img tag: <img src='logo.png'/>. I'm quite new to bootstrap, if someone would help me to figure out how to sort this out, that'd be great.

Answer 1

I would suggest to divide the the hamburger and the logo in two equal parts by using bootstrap classes for small devices.(col-xs-6)
<div class="col-xs-12">
<div class="col-xs-6">
<button className='navbar-toggler hidden-md-up' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
</div>
<div class="col-xs-6">
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
</div>
</div>

Answer 2

Adjust the navbar-brand class as needed for your logo image..
/* responsive nav */
#media(max-width:48em) {
.navbar-default .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar-default .navbar-nav {
float:none !important;
}
.navbar-default .navbar-brand {
float:none;
}
.navbar-default .navbar-brand img {
display:inline;
}
}
http://codeply.com/go/7HJgyK6nxQ