Adjacent column navigation in Bootstrap 4 is a great way to

Below is the code snippet:

<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
      <div class="container">
          <a class="navbar-brand mynav" href="{% url 'home' %}">Star Social</a>
              <ul class="navbar-nav navbar-right">
                  {% if user.is_authenticated %}

                      <li><a href="">Posts</a></li>
                      <li><a href="">Groups</a></li>
                      <li><a href="">Create Group</a></li>
                      <li><a href="{% url 'accounts:logout' %}">Logout</a></li>

                  {% else %}
                    <li><a href="">Group</a></li>
                    <li><a href="{% url 'accounts:login' %}">Login</a></li>
                    <li><a href="{% url 'accounts:signup' %}">Signup</a></li>
                  {% endif %}
              </ul>
      </div>
  </nav>

After deploying, the styling appears different than expected.

https://i.sstatic.net/2Lw3Z.png

Answer №1

Your bootstrap code needs some adjustments. You forgot to add the "class" attribute in the <li> and <a> tags, and you should replace the "navbar-right" class in the ul tag with "ml-auto". Here's the corrected code:

<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
  <a class="navbar-brand" href="{% url 'home' %}">Star Social</a>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a class="nav-link" href="">Posts</a></li>
    <li class="nav-item"><a class="nav-link" href="">Group</a></li>
    <li class="nav-item"><a class="nav-link" href="">Create Group</a></li>
    <li class="nav-item active"><a class="nav-link" href="{% url 'accounts:logout' %}">Logout</a></li>
  </ul>
</nav>

If you want it to collapse properly, I recommend referring to the Bootstrap documentation on the Navbar component. Here is a link for your reference: Bootstrap Navbar. Feel free to reach out if you need further assistance.

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

A step-by-step guide to displaying a list of HTML page titles with clickable links on the homepage using Django

Snapshot of my window view I apologize if this question seems simple, but I am still learning about Django. I am currently in the process of creating a website where articles are stored as template files. My goal is to showcase all article titles on the h ...

Resolving URLs in reverse for Spring Boot GetMapping

I'm in the process of developing a Spring Boot REST API and I've been exploring options for reverse resolution of a URL defined in a GetMapping. In Django's web framework, there is a convenient method called reverse that accomplishes this ta ...

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

Using Angular to create dynamic CSS animations

Hey there! I'm currently working on developing a sleek horizontal menu that may have elements extending beyond the window's x-axis. The navigation through the menu is managed by utilizing arrow keys within an Angular controller. My goal is to in ...

Looking to enhance an existing class model by adding a new field

I'm looking to modify the ArticleModel within the django-wiki app by adding a few fields to the Model. Can anyone suggest a solution for achieving this? I've come across Model.add_to_class, but I'm unsure where exactly to place this code. An ...

CSS: What is causing my three columns to divide?

I am encountering CSS issues while attempting to develop a React app using Next.js. Here is the content of my home.module.css: .grid_container { /* display: grid; */ /* grid-template-columns: auto auto auto; */ /* column-count: 3; align-items: fle ...

Optimal methods for uploading images in a product customization platform

I'm in the process of developing a product customization tool that allows users to choose colors for various parts of a bag and see a live preview, similar to this: My current setup involves using transparent PNG images layered on top of each other a ...

Beginner in html, css, and javascript: "Tips for saving jsfiddle demos?"

Recently, I developed an interest in JavaScript and CSS and came across some impressive examples on jsfiddle. I was wondering if there is a way to "export" these examples to my computer. Simply copying and pasting doesn't seem to work. How can I modi ...

Creating a two-column layout in CSS using div elements instead of tables allows for

Why is it so challenging to create a two-column form layout using CSS? All I'm trying to achieve is: Name: John Smith Age: 25 Description: A long text that should wrap if it exceeds the border, while still aligning with the first l ...

Enhancing Buttons with Stylish CSS Coloration

Looking for a way to style a list of buttons with the same shape and size but different colors? The buttons have unique IDs and all belong to the same class. Take a look at the code snippet below: --html snippet <ul id="query_type"> <li class= ...

What is the most effective way to structure the rules section of a Django application?

Currently, I am in the process of developing a Django system with two primary components: The Game Manager: This component serves as a platform for trusted users to input data related to various gaming systems and player options. The interface is exclusi ...

Utilizing CSS background sizing with jQuery for stunning website aesthetics

In my HTML file, there is a main div container with two nested divs inside it. Each of these inner divs has been assigned separate ids for content placement. By implementing a functionality that changes the background image of the parent div upon clicking ...

`Is it possible to access particular Model attributes within a template?`

In my views.py, I have a ModelForm called a_form that I create like so: a_form = MyModelForm(request.POST or None) This ModelForm contains multiple fields such as field1, field2, field3 and more. Now, I am looking to access only specific fields (for exam ...

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

Django: Troubleshooting video display issues in template (Encountering error message "No supported video format and MIME type detected")

Despite following multiple online resources, I encountered an error ("No video with supported format and MIME type found") in a page where users can perform various actions, including uploading a video. Here are my settings for MEDIA_ROOT and MEDIA_URL in ...

In WordPress, you can add a logo with accompanying text positioned at the bottom of the page

Can someone help me create a header with a logo and text positioned at the bottom next to it? I want the text to be aligned with the bottom of the image. Any suggestions on how to achieve this? Here is the logo image: https://i.sstatic.net/W2S0U.jpg And ...

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

Display each column within a single row on an HTML page without extending into the next row

My HTML page layout is structured as follows: https://i.sstatic.net/elwVs.png The issue at hand is that I want the MSAN and Users columns to be in the same row, or else, for a large number of records, it won't be feasible. Here's my HTML file. ...

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

Encountering a migration issue in Django when attempting to run migrations

Two days ago, I created an app, added some models, and successfully migrated them. Since then, I haven't made any changes until today when I added something new. However, when I tried to migrate after making the necessary changes, I encountered the fo ...