I am currently working on a website using Django 3.1.2 and Bootstrap 4.5.3, but I'm encountering some problems with the navbar.
https://i.sstatic.net/vfHGB.png
My goal is to have the links aligned to the right with middle dots separating them. I tried using this CSS code snippet, but it's not displaying the dots:
.navbar-nav .nav-item:not(:last-child) {
content: "\00B7";
padding-right: 35px;
}
Here is how the corresponding section looks in the HTML:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item nav-link">
<a href="{% url 'blog:about' %}" class="menu">About</a>
</li>
<li class="nav-item nav-link">
<a href="{% url 'blog:teachers' %}" class="menu">Teachers</a>
</li>
<li class="nav-item nav-link">
<a href="#" class="menu">Calendar</a>
</li>
<li class="nav-item nav-link">
<a href="{% url 'blog:projects' %}" class="menu">Projects</a>
</li>
<li class="nav-item nav-link">
<a href="{% url 'blog:contact' %}" class="menu">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item nav-link">
<a href="#" class="menu">Student Info</a>
</li>
<li class="nav-item nav-link">
<a href="#" class="menu">Parent Info</a>
</li>
<li class="nav-item nav-link">
<a href="#" class="menu">Documents</a>
</li>
{% if user.is_authenticated %}
<a href="#">New Post</a>
<a href="#">Logout</a>
<a>Welcome: user.username</a>
{% endif %}
</ul>
</div>
Can anyone spot where I might be going wrong?