Currently embarking on my inaugural html/css venture while utilizing bootstrap. I do have some previous html experience from using Blogger in the past.
Issue I'm encountering is that when expanding my navbar, I aim to have the first li item (a button) float to the left side of the page, with the remaining items floating to the right.
Have experimented with using flex-start and flex-end to adjust the alignment of all items, but struggling to apply this to just a single element. Even tried using the margin-right property to no avail, as results were inconsistent.
Through delving into various codeply samples, the only alternative I stumbled upon was treating the button as a logo, but that would prevent it from collapsing into the navigation menu when toggled.
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>Solely implemented custom CSS for color and font adjustments, so doubtful it would impact any layout, yet willing to provide for further inspection if necessary.
Grateful for any insights shared.