<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text" href="companyName.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-inline-flex justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="login.php">Login <span class="sr-only">(current)</span></a>
</li>
<a class="nav-link text-black" style="font-size:16px"; href="signup.php">Sign Up<a>
<li class="nav-item">
</li>
</ul>
</div>
</header>
Attempting to create a navigation bar with the company name on the left and the login and sign up buttons on the right. The hyperlink for the company name works well, appearing left-aligned when resizing the browser like an iPad.
Using flex-box for the div containing the list of login and sign up links functions correctly with standard browsers. However, resizing the browser causes layout issues, as shown in the image below:
https://i.sstatic.net/dZlLH.png
How can this be resolved? Additionally, I would like to include an image below which is not currently displaying.