Hello everyone, I am new to Bootstrap 4 and struggling to figure out how to center the toggle menu on mobile devices. Can anyone provide some guidance or solutions on how to achieve this?
Here's an example of what I'm aiming for.
<body>
<div class="container-fluid">
<nav class="navbar-expand-lg navbar navbar-light">
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span>Menu</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">CONTACT</a>
</li>
<li class="nav-item active">
<a class="btn btn-outline-primary" href="https://spartan-safety-limited.gogecko.com/users/login">TRADE ACCOUNT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--CAROUSEL-->
</body>
CSS
.navbar-toggler {
font-family: 'Open Sans', sans-serif;
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: #FF6600 ;
border: 1px solid transparent;
border-radius: 0;
margin-right: 50px;
text-align: center;
}
.navbar-light .navbar-toggler{
color: #ffffff;
}