I have been using the template from and I wanted to make a modification to the menu. Instead of having the blue Bootstrap 4 text, I decided to use an image in its place. Everything looked perfect until I checked it on mobile view.
The image was supposed to be in the same location as the text: https://i.sstatic.net/o0HEZ.png
However, my image ended up appearing under the hamburger menu: https://i.sstatic.net/qjz0H.png
Currently, this is how my code looks:
<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>
In order to replace the Bootstrap 4 text with the img tag: <img src='logo.png'/>, I would appreciate any guidance or assistance from someone experienced with Bootstrap.