My React app includes a bootstrap navbar with the following code -
<nav className="navbar navbar-default navbar-expand-sm navbar-light bg-light">
<div className="container-fluid">
<div className="navbar-header">
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<NavLink className="navbar-brand mx-auto" to="/">
<h4>Crafting Social Minds</h4>
</NavLink>
</div>
<div
className="collapse navbar-collapse me-auto"
id="navbarTogglerDemo03"
>
<ul className="navbar-nav ms-auto navbar-custom">
<li className="nav-item">
<NavLink
className="nav-link"
exact
to="/"
>
Organised Events
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/upcoming-events"
>
Upcoming Events
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/new-event"
>
New Event
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/about"
>
About Us
</NavLink>
</li>
</ul>
{/* <div className="social-part">
<i className="fa fa-facebook" aria-hidden="true"></i>
<i className="fa fa-twitter" aria-hidden="true"></i>
<i className="fa fa-instagram" aria-hidden="true"></i>
</div> */}
</div>
</div>
</nav>
On larger and medium devices, the navbar appears as intended. However, on smaller devices, the toggle-navbar button appears above the brand name instead of alongside it. I am looking for a solution to this issue without altering the layout for larger devices using only bootstrap classes. Is there a way to achieve this?
For large and medium devices, the navbar looks like this -
https://i.sstatic.net/qy3ne.png
On small devices, the navbar is displayed as follows -