django navbar not across the top, showing top left box instead-CodePudding

when viewing my django app in the laptop it is showing the menu as expected acress the width of the screen but when trying to run that menu in the mobile it is shown as a small box on the top left of the screen. How to fix that?

<nav >

  <div  id="navbarSupportedContent">
    <ul >
      <li >
      </li>
    </ul>
  <div >
    {% if user.is_authenticated %}

so whay is that happening? how to fix that?

Thanks.

CodePudding user response：

You have not mentioned bootstrap version.

so whay is that happening?

Inside <nav> you are using .collapse and navbar-expand-lg class means when the browser width falls below 992 px the navbar will change to collapsed mode. That is why it is collapsed in your mobile.

how to fix that?

If you want mobile menu at all width's just use navbar-expand class in place of navbar-expand-lg Just use <nav >

Otherwise you have to override default css in your main.css

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

CodePudding user response：

Finally I found the solution but i need an explaination please. after trials and errors i found the problem with the first line

<nav >

I need to take off the first one "navbar" and everthing is ok then. Can someone explain to me why is that?

Thanks.