Error in designing the ReactJS navbar (utilizing internal Bootstrap CSS)

I am facing an issue with the navigation bar in my project. When I use a link to an external source for the navigation bar, it works fine. However, when the internet connection is slow, I notice a brief loading time for the navigation bar which is quite bothersome. To fix this, I attempted to use a CSS file from my project folder but encountered difficulties in implementing it correctly despite trying various code samples. Any assistance would be greatly appreciated. Thank you. I am still working on resolving this problem independently, but some guidance would be very helpful.

function MyNavBar(params) {
  //console.log(params["conpanyID"]);
  return (
    <div>
      <head>
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        />
      </head>

1-When using an external link: [1]: https://i.sstatic.net/SO5qB.png 2-When using a CSS file from my project folder: [2]: https://i.sstatic.net/MqHqo.png

Answer №1

It appears that you may have mistakenly placed your stylesheet within the body instead of the header section. This can cause your page to load first and then your CSS, resulting in a delay in styling.

Below is an example:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>example</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="images/favicon.ico">
</head>

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

React: Import default export as a string

Help needed with JSON data import import dataOption1 from './Option1.json' import dataOption2 from './Option2.json' async setParamsByDomain(optionUser) { await this.setState({ jsonName: "data"+ optionUser}); console.log(t ...

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

Dynamically insert JavaScript and CSS files into the header by using the append method

Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...

Exploring and extracting values from nested arrays of objects in JavaScript and React

Hey there, I am having trouble getting the data from the backend server to display on a chart library. Can you please take a look at my code and help me out? const data = [ { id: "americano", data: [{x: "10",y: 10,}, {x: &quo ...

Implementing the IF statement in jQuery

I've been trying to implement an overflow check when hovering over a div. The issue arises because I'm using jQuery for the hover function and then simple JavaScript for the overflow check in the next step. It seems that directly using an if-then ...

Designing a photo frame slider for a unique touch

My skills in javascript and jQuery are limited, but I am looking to create a customizable slider. While exploring options like Flexslider (), I found it challenging to meet the following specifications: Eliminate color gaps between thumbnails Enable thu ...

Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Is there a way to customize the appearance of Bootstrap tabs by replacing them with a dropdown select menu instead of the standard tab layout created with <ul> and <li> elements? I am working with a relatively small area (such as col-3) where ...

What is the best way to retrieve a MongoDB URI from a .env file on Heroku?

As a MERN stack beginner, I recently deployed my Node.js app to Heroku. However, I am facing an issue where the app is unable to connect to MongoDB Atlas and the data from the database does not load when I provide the MongoDB URI via an environment variabl ...

"Accessing parameters with React Router's useParams function results in

Can someone help me with an issue I'm having while trying to print the topicId extracted from the URL? Every time I try, it keeps returning as undefined. Any ideas on what may be causing this in the code below? import React, {useState, useEffect, useR ...

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

What is causing the border-radius property to malfunction on a particular website when using Internet Explorer?

We create browser add-ons for popular browsers like Google Chrome, Firefox, Safari, and Internet Explorer. Our add-ons inject HTML elements into various websites such as mail.google.com and email14.secureserver.net. The HTML element we use has a border-ra ...

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

Elevate column to top position in mobile display with Bootstrap

I am currently working with Bootstrap column classes and have set up four columns as follows: <div class="col-md-3"> @include('schedulizer.classes-panel') @include('schedulizer.time-span-options-panel') @include(&apos ...

Do all the data get stored in Next.js SSR caching or just the data that is returned?

Working with an API that offers pagination but lacks the ability to sort data according to client requirements, I had to come up with a workaround. My solution involves fetching all the data from the API within getServerSideProps and returning only a subse ...

Unable to locate module: '@material-ui/pickers' - Material UI React

I encountered an error that said: Material UI React - Module not found: Can't resolve '@material-ui/pickers' in React. Previously, I faced a similar issue with '@date-io/date-fns' but was able to fix it by updating to the latest ...

The div is repositioned without the use of padding or margin properties

I am facing an issue with my Next.JS application where a div is not aligning properly at the top of the page. Despite setting padding and margin to 0 for body, HTML, and the div itself, it seems to be slightly off. I have checked all components thoroughly ...

What is the best way to access nested objects in React Native?

Here is the JSON data I am working with: [ { id: 51, name: 'Boat Neck Blouse', image: { id: 669, date_created: '2018-08-27T10:05:39', date_created_gmt: '2018-08-27T10:05:39', date_modified ...

Exploring and Presenting Arrays using React JS

Recently, I have started working with react js and I am trying to add a search functionality to filter an array in React. My goal is to allow the user to enter a character in the textbox and only see the names that contain that specific character. So far, ...

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

The issue of 'position: fixed' not properly functioning within the Materialize CSS modal

My goal is to have the header of the Modal stay fixed while scrolling, but for some reason, the option position:fixed; is not working. I am currently using Materialize CSS to build the modal and surprisingly, position:sticky; is working. $(document).rea ...