My expertise lies in HTML, but I'm currently honing my CSS skills. I'm facing a challenge with positioning my sign-up button at the extreme right without it being part of the main navigation link section. Does anyone have suggestions on how to achieve this? Currently, my sign-up button appears under the Company dropdown, and I'm aiming to have it placed at the far right.
I attempted using the translate property to shift the buttons to the left and accommodate my sign-up button, but this adjustment rendered the mobile version of the navbar unresponsive.
All my navbar links are properly aligned; it's only the sign-up button that isn't contained within the same div as the navbar links. I've included snippets of my CSS and HTML code, and I utilize Bootstrap as well.
Here's an excerpt of my code:
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">
<img src="assets/images/logo-l.png" class="img-fluid" alt="img" /> CherryBerry <span class="text-red"> Studios </span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="knowledge-base.php">Knowledge Base</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">
Company
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="story/about.php">About Us</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="story/mission.php">Mission</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="story/mission.php">Partners</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="story/mission.php">Affiliates</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="story/mission.php">Legal Info</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="support.php">Support</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="support.php">Our Team</a>
</li>
</ul>
<a href="signup.php" class="btn btn-menu">Sign Up</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>