CODEWITHSUNDEEP
javascripthtmlcssnavbarbootstrap-5
SueAnn Van
SueAnn Van

Reputation: 1

Nav Bar Pills to the Left and Text to the Right Bootstrap5

I am trying to have all my nav pills to the left and then add a single text element to the nav bar that aligns to the left/end and stays at the end of the navbar when the page is resized.

Navbar Img

I thought I solved this by adding a div so that the navbar pills would take up 50% width and the text width would also be 50% but set text-align to end. The only problem is when I add this div it separates the nav-links from their nav-pills and this causes the data-bs-toggle="pill" function not to work.

The top navbar has the text "RMWLL" position correctly but the pill toggle doesn't work. The bottom navbar has the text incorrectly positioned but the pill toggle does work.

I want a combination where both the pill toggle work and the text is correctly positioned.

'''

<!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/[email protected]/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/[email protected]/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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                <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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                <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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
            </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, 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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                <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, 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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                <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, 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 voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
            </div>
        </div> <!--teamPage--> 
    </body> 
</html>

'''

Upvotes: 0

Views: 83

Answers (1)

dev254
dev254

Reputation: 117

Left and Right is replaced with start and end, So ml-auto is now ms-auto and mr-auto is now me-auto

Upvotes: 1

Related Questions