Navbar in bootstrap appears to be flashing when it is in its expanded

Example Link

On smaller screens, the bootstrap navbar menu does not collapse by default when clicking on a menu item.

To fix this issue, I added attributes data-toggle="collapse" and data-target="#navbar-collapse" to each menu item so that the menu will collapse properly when items are selected.

However, I noticed some blinking even on larger screens when the navbar items are not in the sandwich menu. This may be due to the collapse animation.

My question is whether there is a way to prevent this blinking or disable the animation using CSS. Although I could potentially stop the animation using jQuery, I would prefer to avoid this option since the application is Angular-based, and I believe this scenario is quite common.

javascriptjquerycsstwitter-bootstrapnavbar

Answer №1

It's possible you may not have this code yet, so I'll go ahead and share it with you.

To set up your main container with a navbar using Bootstrap, start with a navbar navbar-default div. Inside that, add a container-fluid div, followed by the following:

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBodyId" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Page Title</a>
</div>

Next, structure your navbar like this:

<div class="collapse navbar-collapse" id="navBodyId">
  <ul class="nav navbar-nav">
   ...
  </ul>
</div>

Make sure to close off these elements as mentioned above.

You don't need to collapse every menu item. If this isn't clear, Bootstrap's website offers great examples with accompanying source code for reference.

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

Ways to alter formData using jQuery

For my form submission using AJAX, I utilize FormData to gather data. Here is how I collect the form's data: var data = new FormData($(this)[0]); One of the inputs on the form consists of a color value in HSV format that I need to convert to hex. Wh ...

jqueryajaxforms

"How to ensure a background image fits perfectly on the screen in IE10

I am facing a problem while trying to set the background image in CSS to fit the screen. It works fine with the latest version of Chrome, but there is an issue with IE 10. html { border-top: 10px solid #8A85A5; background: url("http://www.lifeintempe.com/ ...

cssasp.netinternet-explorer-10

Is it safe to set content type as text/plain instead of application/json for JSON response?

I've been developing a PHP script to retrieve public JSON data, which will be accessed by JavaScript on the client side. However, I've encountered an issue with the server (LiteSpeed shared hosting) not having brotli/gzip compression enabled for ...

javascriptphpjsoncontent-type

Using jQuery to iterate through elements of a PHP array

I've got a PHP array that outputs like this: Array ( [0] => Array ( [title] => Much title [end] => Such end [start] => Very start ) [1] => Array ( [title] ...

javascriptphpjqueryarrays

Does the RequireJS order plugin begin fetching files in the correct order, but fail to wait for them to finish downloading?

I've been trying to incorporate RequireJS into my project, but I'm encountering some issues with its functionality. It seems like the order plugin should download scripts in the correct order and wait for each one to finish before moving on to th ...

jquerydownloadrequirejs

Load jQuery core asynchronously with a backup plan

Exploring performance optimization and non-blocking scripts in the header, my focus has been on asynchronously loading jQuery itself. In my search, I came across a jQuery Loader script that can async load jQuery and then handle and queue jQuery document r ...

jqueryasynchronouspagespeed

Guide on merging the root route with child routes using react router v6

When a user visits "/", I want it to automatically redirect them to "/todo", but this functionality is not working as expected. let router = createBrowserRouter([ { path: "/", element: <Layout />, children: ...

javascriptreactjsreact-router-dom

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

I've been immersed in developing a Chrome extension with Angular 5. Successfully, I managed to extract favIconUrls from the tabs API and link them to my popup.html's DOM. The icons are retrieved and displayed without any hiccups. See an example ...

javascriptangulargoogle-chrome-extensioncors

Creating a large JSON file (4 GB) using Node.js

I am facing a challenge with handling a large json object (generated using the espree JavaScript parser, containing an array of objects). I have been trying to write it to a .json file, but every attempt fails due to memory allocation issues (even though m ...

javascriptnode.jsjson

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Using dryscrape for web scraping: encountering an issue when selecting a radio button with CSS

I am attempting to extract data from a dynamically updated table on a webpage using dryscrape. The web page in question is located at . My code functions correctly with tables that are generated when the page is loaded initially. However, I now need to upd ...

pythoncssxpathdryscrape

What sets apart +variable+ and ${variable} in JavaScript?

Just starting to code and eager to learn. While I was taking in a lecture, I came across this interesting snippet of code: var coworkers = ['go', 'hello', 'hi', 'doit']; <script type="text/javascript&q ...

javascripthtml

Is it possible to switch between Jquery and CSS?

Using PHP, I have created a CSS file that enables me to easily adjust the color of various elements. Is there a way for me to regenerate the stylesheet and apply it to the DOM using JQuery? For example: <?php if (isset($_POST['mycolor'])){ $ ...

phpjquerycss

I am looking to utilize ajax to upload a batch of images simultaneously

I'm fairly new to coding and I'm working on a project that involves creating a slideshow feature for users to upload photos. Users can upload images and preview them using the following code: function photoPreview (input) { if (input.files ...

jqueryajaxnode.js

Manipulating the DOM using a Flask route in an HTML form

I have a form that allows users to input the names of "Player A" and "Player B". When the user clicks on the "Start Game" button, the game begins by redirecting to a Flask route (/players). I want the "player-text" section to be updated with the player nam ...

javascriptdomflask

Issues encountered while modifying Vue data

In my Vue JS 2 code, I have structured my data as follows: data : { newBus: { name: '', hours: { sunday: '', } } } When setting the data usi ...

javascriptvue.jsvuejs2

Discover the best way to transfer hook values to CreateContext in React

In my project, I've implemented a component called SideBarBlurChange. Within this component, there is a requirement to pass a value named values inside the BlurChangeValue array, which is nested within the CreateContext. I have searched online for ex ...

javascriptreactjsreact-reduxreact-hooksreact-context

react-intersection-observer is specifically designed to function with the final elements

I am currently working on implementing the Lazy Loading feature using react-intersection-observer. The main objective is to load images in the boxes only when they appear within the viewport. At the moment, as I scroll down to the last elements, all the i ...

javascriptreactjsreact-refreact-intersection-observer

Instructions on utilizing Tesseract.recognize in Node.js

I am working on developing an OCR program but encountered some issues while declaring the 'Tesseract.recognize' method. Here is the code snippet: const express = require('express'); const fs= require('fs'); const multer = r ...

javascriptnode.jsnpmtesseract

Tips for successfully retrieving a boolean value from an ASP.Net JavaScript AJAX request using a C# method

Query: Is there a way to call a C# function from JavaScript code on an .aspx webpage to get authentication results based on a username and password? Here is the JavaScript AJAX POST request I am currently using: $.ajax({ type: "POST", ...

javascriptc#asp.netasp.net-ajax