As I construct my website, my vision includes a collapsible navigation bar in the top left corner and a social media bar in the top right corner. It is imperative to me that the social icons remain aligned with the navigation links at all times.
To achieve this layout, I have devised a plan: creating a row with two columns. The first column houses the navigation bar, while the second column contains all the social media icons. By utilizing "justify-content-between," I intend to position these two elements at opposite ends of the row.
I am making progress towards my goal. The collapsible navigation bar and the social links are in place.
However, I have encountered an issue where the social bar appears adjacent to the navigation bar rather than in the top right corner. This might be due to the fact that my row does not occupy the entire width of the page.
Below is the code snippet relevant to this matter:
<nav class="navbar navbar-expand-sm navbar-light bg-white">
<div class="row justify-content-between align-items-baseline">
<div class="col-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-fill">
<li class="nav-item"><a class="nav-link active" href=".">Home<span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="teaching">Teaching</a></li>
<li class="nav-item"><a class="nav-link" href="research">Research</a></li>
<li class="nav-item"><a class="nav-link" href="outreach">Outreach</a></li>
<li class="nav-item"><a class="nav-link" href="personal">Personal</a></li>
</li>
</ul>
</div>
</div>
<div class="col-auto">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8e9d859a818caf9f869b9bc18a8b9a">[email protected]</a>" target="_blank"><img src="https://img.icons8.com/material-sharp/24/000000/important-mail.png"/></a>
<a href="https://www.twitter.com/arjunc12" target="_blank"> <img src="https://img.icons8.com/fluent/24/000000/twitter.png"/></a>
<a href="https://www.instagram.com/arjunc12" target="_blank"><img src="https://img.icons8.com/fluent/24/000000/instagram-new.png"/></a>
<a href="http://writers-fakeblock.blogspot.com/" target="_blank"><img src="https://img.icons8.com/color/24/000000/blogger.png"/></a>
</div>
</div>
</nav>Displayed above is what the current setup looks like. In the image provided, you can observe how the social bar needs to be adjusted to align with the far right side.
https://i.sstatic.net/rIUol.png
If you wish to view the outcome for yourself or examine the complete source code, please follow this link to access my website.
I humbly request your kindness as I traverse through the world of web programming as a novice. There may be deeper complexities at play due to my approach being quite ad-hoc and non-idiomatic.
Update: Resolving the situation involved realizing that the navigation should be enclosed within the row/column structure instead of vice versa.