Something isn't quite right - Mobile Compatibility not functioning

I have been developing a website and running into an issue with the header. It works fine on desktop and is responsive, but on mobile devices, the Bootstrap functionality seems to be missing. I've included my code below, could someone please help me identify what's causing this problem?

  <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>
javascripthtmlcssdjangotwitter-bootstrap

Answer №1

I successfully executed this code

<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>

modification:

  • data-toggle="collapse" changed to 
    data-bs-toggle="collapse"
  • data-target="#navbarSupportedContent"
    changed to 
    data-bs-target="#navbarSupportedContent"
  • <div class="collapse navbar-collapse " id="#navbarSupportedContent">
    updated to 
    <div  class="collapse navbar-collapse " id="navbarSupportedContent">
  • I included navbar-light and bg-light classes on the nav for better visibility in the browser.
  • Ensure to add bootstrap's <link> and <script> tags

If you encounter issues, it may relate to browser compatibility or css prefixes. Test your code across different browsers on mobile and desktop versions. More details: Vendor Prefixes

Trust this information proves beneficial!

Answer №2

To achieve the desired look, it is essential to set up CSS styles that are compatible with each other.

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

You cannot embed a YouTube video using its iframe code in an HTML document, according to YouTube's guidelines

I attempted to include a YouTube video in my HTML code, but it kept showing the message "YouTube won't allow connection." Here is the code I used: <center><iframe src="https://www.youtube.com/embed/fcPOsBCwyu8" frameborder="0&q ...

htmlyoutubeembedx-frame-options

Mobile issue: unable to scroll to the top of the page

Despite my efforts in searching and attempting various solutions from SO, I have still been unsuccessful. I have explored options like the iscroll library and setting timeouts, but to no avail. My objective is to enable scrolling to the top of the window/ ...

javascriptjqueryios

Refresh a selection menu using a checkmark

Can you help me with a script to enable/disable a dropdown based on the checkbox status? <body onload="enableDropdown(false);"> <form name="form1" method="post" onload="enableDropdown(false);"> <input type="checkbox" name="others" oncl ...

javascriptcheckbox

Error encountered while using JavaScript for waiting in Selenium

When using selenium and phantomjs to submit a form and then navigate back to the previous page, sometimes I encounter a timeout error as shown below: TimeoutError: Waiting for element to be located By(xpath,//div[@id='ContactFormBody']/div/br) W ...

javascriptnode.jsselenium

My Discord bot seems to be malfunctioning and failing to send out

I am new to discord.js and I'm having trouble getting my bot to respond with a message when I send one on the server. The bot shows as online in Discord and "Logged in!" appears in the console when I run it, so client.on("ready") seems to be working f ...

javascriptnode.jsjavahelp

Image encoded in base64 not appearing on the screen

Hey there, I'm currently working on implementing a jQuery image uploader that generates a base64 code when an image is selected. function readImage(input) { if (input.files && input.files[0]) { var FR= new FileReader(); FR.onload ...

javascriptjqueryhtmlimage

Examining current elements in database using Node.js and MySQL

There appears to be a problem with the code inside con.query(query, function (err, result, fields). The issue is that it is never being called. This part of the code is meant to verify that when a user signs up, the email they enter is not already in use. ...

javascriptmysqlnode.js

When will the javascript file fire if it has this implementation?

Can someone help me make sense of this jquery snippet? (function( window, undefined ) { //All the JQuery code is included here ... })(window); I'm curious, if a .js file is loaded in a page using the <script> tag, at what point does it ...

javascriptjqueryfunction

Combining default and named exports in Rollup configuration

Currently, I am in the process of developing a Bluetooth library for Node.js which will be utilizing TypeScript and Rollup. My goal is to allow users to import components from my library in various ways. import Sblendid from "@sblendid/sblendid"; import S ...

javascripttypescriptnpm

Tracking pixels for website analytics

Have you ever thought about why web analytics software opts to use a 1x1 gif element to send a beacon instead of just including a <script src='http://my.analytics.com/script.js?my=params'></script> tag for sending the beacon? This w ...

javascriptwebanalytics

Techniques for verifying phone numbers from various countries

The number of digits in a mobile number differs from country to country. I have tried using regular expressions, however, for example, India allows 10 digits, but this does not validate UAE, where the number of digits can range from 7 to 9. ...

javajavascriptregexvalidationclient-side-validation

Challenges with Three.js CanvasRenderer

Exploring the world of Three.js has been an interesting journey so far. While working on implementing a fallback using CanvasRenderer for devices that do not support WebGL, I encountered a couple of challenges: Anomaly in Line Geometry https://i.sstatic. ...

javascriptthree.js

Disabling auto-refresh while the flash player is in focus

Is there a way to prevent a browser refresh while a flash object is in focus inside a pop-up window? I too dislike pop-up windows, but our flash questionnaire is being disrupted by users who refresh the page. I have implemented JavaScript code to block r ...

javascriptflashrefresh

What is the best way to find all documents based on a particular field in MongoDB?

Within my MongoDB database, I have a collection of bets structured like this: { id: String, user_id: String, type: String, events: [{ eventID: String, sport: String, evento: String, ...

javascriptnode.jsdatabasemongodbexpress

Ensuring Smooth Alignment of CSS Divs

I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...

htmlcsscss-floatcenter

Navigating to the next page on a dynamic component in Angular 5 by

I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For ...

javascriptangulartypescriptcontentful

Tips for serializing nested relational models in django with DRF?

I have a variety of Django models that are linked through different relations like Many-to-many and Foreignkey. I am looking to serialize them using djnago-rest. Below are the models: class CommonFieldsAbstract(models.Model): name = models.CharField(m ...

djangodjango-modelsdjango-rest-frameworkdjango-ormdjango-serializer

Browsers are failing to display any content during ajax calls

I am currently attempting to extract artist URLs from the following page: https://myspace.com/discover/artists?genreId=1002532 However, this page is making an AJAX call to retrieve user details. I have identified the URL in Firebug as: https://myspace.c ...

javascriptjquerypythonajaxwget

dompdf: Setting a white margin on an A4 size paper

I'm currently utilizing dompdf, a PHP library, to generate PDF pages and I've encountered an issue with setting the correct dimensions. Whenever I apply the CSS property: @page { size: 21cm 29.7cm; } .... and let's say I want the top ...

phphtmlcssdompdf

What is the best way to apply value filters in a Django form with ModelForm?

I am currently utilizing the ModelForm to insert my data. Although it's functioning effectively, the ForeignKey dropdown list is presenting all values instead of just the ones relevant to the logged-in user. Below is my model for ExcludedDate, the re ...

pythondjangodjango-forms