I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears.
[insert image description here][1][insert image description here][2]
My question is, how can I style the elements in the navbar so that when they appear as part of the hamburger menu, they don't look like buttons anymore?
Thank you!
Below is the code I used:
<a class="navbar-brand" href="index.html">MyJobBoard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav navbar-right ml-auto mt-2 mt-lg-0 float-right text-right">
<li class="nav-item active">
<a class="nav-link post-a-job-button pull-right">Create a profile</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-light mr-3 pull-right">Sign In</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mr-3 pull-right">Post a Job</button>
</li>
</ul>
</div>