The Bootstrap navbar functions flawlessly in full screen mode, but encounters issues when condensed

My bootstrap navbar looks great in full-screen mode, as shown here.

However, when the screen size is reduced, bootstrap automatically stacks the items, leading to an undesirable layout with Register and Login on the same line, as seen here.

I am looking to align the Register and Login routes on the right side while keeping the rest of the routes stacked when condensed.

Here is my current HTML for the navigation bar:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2ecf2ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Pricing</a>
        </li>
      </ul>
        {% if current_user.is_authenticated %}
            <span class="navbar-text mb-2 mb-lg-0">
                <a href="{{ url_for('logout')}}" class="me-4">Logout</a>
            </span>
        {% else%}
            <span class="navbar-text mb-2 mb-lg-0">
                <a href="{{ url_for('login')}}" class="me-4">Login</a>
            </span>
            <span class="navbar-text mb-2 mb-lg-0">
                <a href="{{ url_for('register')}}" class="me-4">Register</a>
            </span>
        {% endif %}
    </div>
  </div>
</nav>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

It's a bit unclear what exactly you're asking, but my interpretation suggests consolidating the login, register, and logoff functions within a div and employing a media query in the CSS to achieve the desired outcome.

<style>
 @media only screen and (max-width: 990px) {
   .chnageMeWhenSmall {
    position: absolute;
    right: 60px;
    }
  }
</style>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b9589">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Pricing</a>
    </li>
  </ul>
     <div class="chnageMeWhenSmall">
    {% if current_user.is_authenticated %}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('logout')}}" class="me-4">Logout</a>
        </span>
    {% else%}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('login')}}" class="me-4">Login</a>
        </span>
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('register')}}" class="me-4">Register</a>
        </span>
    {% endif %}
     </div>
    </div>
  </div>
</nav>

Answer №2

For the mobile view, the navbar should display as a stack. Ensure that you have properly included xs- classes for the desired layout. Currently, only lg classes are visible in your code snippet. Please consider sharing a codepen link if the issue persists.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure the box div is centered responsively?

Here is the code for my HTML file: body { background-color: rgb(231, 59, 59); font-family: "Alata"; font-size: 20px; margin: 30px; } h1 { margin-top: 100px; color: #202124; text-align: center; } .box { width: 1000px; } input { positi ...

htmlcssweb-deploymentgoogle-web-designer

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Currently, I am in the process of integrating a logo carousel into my React web application using CSS. My goal is to create a slider that loops infinitely, with the last logo seamlessly transitioning to the first logo and continuing this cycle indefinitely ...

cssreactjstypescriptsliderinfinity

Capturing the Clicked Element's Value in Uib Pagination without Scroll to Top

For my project, I am utilizing uib pagination. I have successfully implemented a feature that allows the page to scroll to the top when a link is clicked. However, I am facing an issue where the page scrolls to the top when clicking on '...'. How ...

angularjstwitter-bootstrap

Enlarging an image on canvas and creating a repeating pattern

My canvas size is 500px x 500px. I have a png image that matches the canvas size, which you can view here. I am looking to resize the image to 100px x 100px and then use it as part of a repeat pattern on the canvas. This is how I achieve this: // First d ...

javascripthtmlcanvas

Restrict the display of items in a unordered list element

Below is my code snippet that limits the number of visible list items in a ul: $wnd.$(el) .find('li:gt(9)') .hide() .end() .append( $wnd.$('<li>+More</li>').click( function(){ $wnd.$(this).nextAl ...

javascriptjqueryhtml

Techniques for positioning text beside an image in a floating block

Despite experimenting with various display settings such as block and inline for text, I am still facing issues. Please take a look at my website: ...

htmlcss

Send an AJAX parameter and retrieve it on the expressjs server side of the application

It seems like there's a crucial piece missing here. Let's begin with an AJAX call that can be executed in the <script> tag to send data to the backend. It might look something like this: function changeDom(){ console.log('connectin ...

htmlnode.jsajaxexpress

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

Switching the arrow direction in Bootstrap 4 menu toggles

I'm a beginner with Bootstrap 4. My navigation menu includes a dropdown item with the standard caret pointing down, added automatically by Bootstrap. Now, I want to make the caret point up after opening the dropdown menu for the nav item. Despite ext ...

jquerycsstwitter-bootstrapbootstrap-4caret

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

javascriptjquerycss

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Need help with dynamically assigning objects to select boxes in AngularJS. I have a scenario where I add multiple select boxes to a form, but each box should only display items that haven't been selected in other boxes. How can I achieve this functio ...

javascripthtmlangularjsobjectdrop-down-menu

Is there a way to organize an array of elements into three columns using PHP?

My array of menu items is being displayed on the screen in 3 columns, but I want them to appear differently without altering the HTML structure. Currently, they are listed like this: 1 2 3 4 5 6 7 8 9 I would like them to display as follows: 1 4 7 ...

phphtmlcssarraysmatrix

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas

The CSS cubic-bezier fails to smoothly transition back to its initial position

I created an animation that works perfectly when hovering over the target elements, however, it doesn't smoothly transition back to its original position when the cursor moves outside of the target element. Instead, it snaps back abruptly and unattrac ...

cssanimationtransition

Add a jQuery click function within a loop indefinitely

Hello there, I have a simple loop set up in PHP and I am trying to figure out how to create an event that triggers whenever the user clicks on any line generated by this loop. Here's my basic PHP while loop: <?php $x = 1; while($x <= 5) { ...

javascriptphpjqueryhtmlwhile-loop

Is window.open exclusive to Firefox?

Apologies if this question has been asked before! I am experiencing some issues with my Javascript code. It works perfectly in Firefox and opens a pop-up window as expected. However, in IE 9 it does nothing, and in Chrome it behaves like a link and change ...

javascripthtml

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

cssreactjssassflexbox

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

Providing data from a javascript xml file upon page initialization

I am aiming to extract multiple values from an XML file as soon as an HTML page is loaded. The XML file remains constant and will not change over time. It will be stored in the same directory as the HTML page. The purpose of this XML file is to fill severa ...

javascripthtmlxmlajax

Encountering a problem with scrolling the modal to the top

I am currently working on a code snippet that involves scrolling the modal to the top position. The purpose of this is to display form validation messages within the modal popup. Below are the jQuery code snippets that I have attempted: //Click event t ...

javascriptjquerycssbootstrap-4