Icons disappear from the navbar toggle when clicked on a small screen

Using Django and Bootstrap 4, I've created a navbar with a toggle feature. However, when viewed on a small screen, the toggle button does not display the icons as expected. Instead, it shows empty lines. Strangely, when the phone is rotated, the toggle feature works fine. I suspect it may be related to the screen resolution, but I'm unsure of how to address this issue.

Both jQuery and Bootstrap are correctly implemented in the order they should be.

The code snippet I'm using is as follows:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark white scrolling-navbar" role="navigation">
  (navbar code here)
</nav>

In the head section:

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

In the body section:

<body>
    (script tags here)
</body>

Any assistance would be greatly appreciated.

EDIT

View the navbar before clicking here.

View the navbar after clicking here.

htmlcssdjangotwitter-bootstrapbootstrap-4

Answer №1

Whenever you access your website on a mobile device with a screen resolution of less than or equal to 568px, the d-none d-sm-inline or d-none d-sm-inline-block classes are applied, causing all nav-links to have a display: none property. This makes them invisible on mobile devices but visible in landscape view.

The solution is to remove the d-none class from all span tags and replace d-sm-inline-block with d-inline-block, and d-sm-inline with d-inline. See the example below:

<li class="nav-item active">
    <a class="nav-link waves-effect" href="{% url 'product-create' %}">
        <span class="clearfix d-inline-block">
              <i class="fa fa-plus-square-o" aria-hidden="true"></i> Create Product 
        </span>
    </a>
</li>

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

The child element with the specified position within the id element

Is it possible to highlight 'The second paragraph' of p id="dd" using nth-child? I noticed that when I add "#dd" in styles, it stops working properly. <!DOCTYPE html> <html> <head> <style> #dd p:nth-child(3) { back ...

htmlcsscss-selectors

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

javascriptjavacssnpmwebpack

Styling columns alternately with CSS - an even-odd approach

I'm having an issue with my html code structure. Here's how it looks: <article></article> <article></article> <article></article> <article></article> <article></article> <article> ...

htmlcsscss-selectors

Comparing Django Templating with AJAX for loading a small div on a web page

My Django server is set up to load a webpage that contains mostly static content, but a few numbers need to be fetched from the database. I am considering the trade-offs between performance and price. One option is to host my Django server on a high-speed ...

ajaxdjangodjango-templates

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

Django: We're sorry, but there seems to be an issue with the page redirecting

For the database check to see if a user has completed the Payment_receipt model form during sign-up and redirect them to the plan_select page if not, the following view was attempted. However, an error stating "The page isn't redirecting properly" occ ...

pythondjangodjango-views

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Can someone help me with this code issue? <!doctype html> <title>Test case</title> <div style="float: left"> <div style="float: left;">Short.</div> <div></div> <div style="overflow: hidden;"&g ...

htmlcssgoogle-chrome

Implementing jQuery form.js to dynamically update image src upon success

I am currently utilizing jquery.form.js to submit a form via AJAX and retrieve a response. My PHP page is configured to output the image URL in the format "images/thumbs/071112130957.jpg" Below is my jQuery code: $("#imageform").ajaxForm( { target: &ap ...

phpjqueryhtmlajaxform

Lean/Tilt just the lower portion of the division

I have been experimenting with adding a unique slant to the bottom of a div. Progress has been made, as shown in the example below where I successfully applied the slant to some elements on the page. Currently, the slant is visible on both the top and bot ...

csswordpressskewrevolution-slider

How to Send Javascript DOM Value to Inner HTML

I am trying to extract a value from a hidden element ID and set it as the inner HTML for another element ID. Below is my code: <script> function replaceText(){ var x=document.getElementById("mainTitle1").textContent; document.getElementById("mainTi ...

javascripthtmldom

Converting Markdown to HTML using AngularJS

I'm utilizing the Contentful API to retrieve content. It comes in the form of a JSON object to my Node server, which then forwards it to my Angular frontend. This JSON object contains raw markdown text that has not been processed yet. For instance, t ...

javascripthtmljsonangularjsmarkdown

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml

Passing data from one NodeJS page to another

I am working on creating a User management system in Node. My goal is to have a page that displays all users in a table format. When the edit button is clicked, I want to navigate to another page with detailed information about the selected user. However, ...

javascripthtmlnode.jsexpress

Adjust the appearance of "FAQS" to show as "FAQs" in Lodash

I've integrated the lodash library - a powerful JavaScript utility tool - into my AngularJS project. <div ng-repeat="question in questions"> <label>{{question | startCase}}</label> </div> If you want to learn more about th ...

javascripthtmlangularjslodash

How to retrieve an array value within a function in AngularJS

<select class="form-control" id="column" ng-model="selectedcolumn" ng-options="column for column in columns"></select> <input type="text" ng-model="test[selectedcolumn]" ng-change="search()" /> Is there a way to retrieve the value o ...

javascriptangularjshtml

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

javascripthtmlvue.js

Enhance the code for updating the content within a div element

I recently discovered that utilizing jQuery allows for updating the content within a div. My goal now is to enhance this script so the content remains consistent, even while loading or not. Take a look at my current code: function changeContent () { va ...

javascriptjqueryhtmlcss

Final div class nested within the HTML and styled with CSS

Is there a way to keep the last div (class) from sliding underneath? I applied margin-right to .artist_wrap. I assumed that using overflow: hidden would contain it within #music_videos_wrap, but it just disappears. Any assistance is greatly appreciated. H ...

htmlcss

How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available: 1. The ability to add or remove rows 2. Adding data into a row using different controls such as combo-boxes, text boxes, etc. One of the controls is a text box labeled "Additional Information ...

htmlangulartypescriptangular-material