CODEWITHSUNDEEP
javascripthtmlcssdjangotwitter-bootstrap
ciphersandtea
ciphersandtea

Reputation: 1

What is wrong--Mobile Compatibility not Working

I have been working on a website and at the moment, the header works and is responsive in desktop but when I get to mobile, the bootstrap doesn't show and it doesn't interact with mobile this is my code I have so far if anyone could tell me what is wrong that would be super helpful.

  <div class="continer-fluid">
  <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top">
   <div class="navbar navbar-expand-lg ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span> 
    </button>
    <div class="container">
         <a href="/" class="navbar-brand">
                <img src="{% static "app/content/collectore-luxury-logo11.png" %}" width="30" height="30" class="d-inline-block align-top" alt="">
            Website
        </a>
        
        <div class="collapse navbar-collapse " id="#navbarSupportedContent">
    
            <ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="nav-item"><a href="{% url 'about' %}">About</a></li>
                <li class="nav-item"><a href="Medium Blog">Blog</a></li>
                <li class="nav-item"><a href="{% url 'New Thing' %}">New Thing</a></li>
            </ul>

Upvotes: 0

Views: 61

Answers (2)

Owen McManus
Owen McManus

Reputation: 11

I got this code to work

<div class="continer-fluid">
      <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-light bg-light">
        <div class="navbar navbar-expand-lg ">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span> 
          </button>
          <div class="container">
            <a href="/" class="navbar-brand">
              <img src="{% static "app/content/collectore-luxury-logo11.png" %}" width="30" height="30" class="d-inline-block align-top" alt="">
              Website
            </a>
            
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
        
              <ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="nav-item"><a href="{% url 'about' %}">About</a></li>
                <li class="nav-item"><a href="Medium Blog">Blog</a></li>
                <li class="nav-item"><a href="{% url 'New Thing' %}">New Thing</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>

change:

  • data-toggle="collapse" to data-bs-toggle="collapse"
  • data-target="#navbarSupportedContent" to data-bs-target="#navbarSupportedContent"
  • <div class="collapse navbar-collapse " id="#navbarSupportedContent"> to <div class="collapse navbar-collapse " id="navbarSupportedContent">
  • I added navbar-light and bg-light classes to the nav so I could see it on my browser.
  • Remember to include bootstrap's <link> and <script> tags

If it still doesn't work, it could be an issue with a browser or css prefixes. Try your code on different mobile and desktop browsers. More info: Vendor Prefixes

Hope this helps!

Upvotes: 1

Zonghang Qin
Zonghang Qin

Reputation: 7

You need to configure CSS compatible styles

Upvotes: 0

Related Questions