I am trying to align all my navigation pills to the left, and then add a single text element that stays at the end of the navbar even when the page is resized.
Navbar Image
My attempt involved adding a div so that the navbar pills would take up 50% width while the text would also occupy 50% with alignment set to the right. However, this caused the pill toggle functionality to break as it separated the nav-links from their nav-pills.
The top navbar correctly positions the text "RMWLL," but the pill toggle doesn't function. The bottom navbar misplaces the text but successfully toggles between pills.
My aim is to have both functionalities work flawlessly - the pill toggle and the correct positioning of the text.
'''
<!DOCTYPE html>
<html lang="en">
<title>LMS 1</title>
<head>
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc8d3ccd3ce">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/94a9ffdfe8.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7d70706b6c6b6d7e6f5f2a312e312c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<style>
.nav{
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(14,0,0,1) 67%, rgba(19,29,178,1) 100%);
}
.nav-content{
display: flex;
width:50%;
}
.league-name{
color: white;
text-align: end;
padding: 20px;
width:50%;
}
.nav-pills .nav-link.active{
background-color: #131db2;
color: white;
}
.nav-link{
color: white;
}
.mainContent{
background-color: white;
border-radius: 15px;
}
.teamContent{
background-color: lightyellow;
border-radius: 15px;
}
body{
background-color: #D3D3D3;
padding-top: 150px;
}
.hidden{
display:none;
}
.test{
width: 16%;
display: flex;
}
</style>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<!--HEADER-NAVIGATION -->
<div class="container-fluid fixed-top">
<div class="row">
<nav class="navbar">
<ul class="nav w-100 nav-pills" role="tablist">
<div class="nav-content ">
<a class="navbar-brand p-2 m-0 pe-5" href="#">
<img src="favicon_drawing.png" width="50" height="50">
</a> <!-- links to home page -->
<li class="nav-item py-3">
<a class="nav-link active" data-bs-toggle="pill" href="#" onclick="return show('homePage','teamPage');">Home</a>
</li>
<li class="nav-item py-3" href="#teamPage">
<a class="nav-link" data-bs-toggle="pill" onclick="return show('teamPage','homePage');">Teams</a>
</li>
</div>
<h4 class="league-name fw-bold">RMWLL</h4>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar ">
<ul class="nav w-100 nav-pills" role="tablist">
<a class="navbar-brand p-2 m-0 pe-5" href="#">
<img src="favicon_drawing.png" width="50" height="50">
</a> <!-- links to home page -->
<li class="nav-item py-3">
<a class="nav-link active" data-bs-toggle="pill" href="#" onclick="return show('homePage','teamPage');">Home</a>
</li>
<li class="nav-item py-3" href="#teamPage">
<a class="nav-link" data-bs-toggle="pill" onclick="return show('teamPage','homePage');">Teams</a>
</li>
<h4 class="league-name fw-bold">RMWLL</h4>
</ul>
</nav>
</div>
</div>
</div>
<div id="homePage">
<main class="container-fluid">
<h4 class="my-5 mainContent">Home Page</h4>
<p class="mainContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis...
</main>
</div> <!--teamPage-->
<div class="container-fluid hidden" id="teamPage">
<h4 class="my-5 teamContent">Team Page</h4>
<p class="teamContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore..
</div>
</div> <!--teamPage-->
</body>
</html>
'''