[Fixed]-Django admin site nav sidebar messed up

by

15👍

✅

First of all, this navbar is added by Django 3.1+ and not by any other 3rd part packages.

Copy & Pasting from Django 3.X admin showing all models in a new navbar,

From the release
notes,

The admin now has a sidebar on larger screens for easier navigation.
It is enabled by default but can be disabled by using a custom
AdminSite and setting AdminSite.enable_nav_sidebar
to False.

So, this is a feature that added in Django 3.1 and can be removed by settings AdminSite.enable_nav_sidebar = False (see How to customize AdminSite class)

How to fix irregular styling?

You don’t have to edit any CSS or HTML file to fix the styling, because Django comes with a new set of CSS and HTML, which usually fix the issue. (That is, it is not recommended to alter the styling file only for this)

If that doesn’t work for you, it might be because of your browser cache.

If you are using Chrome,

  1. Go to the admin page
  2. Ctrl + Shift + i and select Network tab and then tick Disable Cache
  3. Refresh the page
    enter image description here
👤JPG

15👍

see this side bar is added by django 3.1 and it is removable

to remove this you have to add below code in admin.py or urls.py as you are working with admin you should add below code in admin site

from django.contrib import admin

admin.autodiscover()
admin.site.enable_nav_sidebar = False

autodiscocer(): This function attempts to import an admin module in each installed application

please let me know if worked

👤Vishal Pandey

1👍

I fixed this by deleting my static directory, then doing a collect static, then forcing my browser to reload.

This had been caused in a Django 3 to 4 upgrade.

👤JamieO

Leave a comment