Hey there, I have a header.css file!

My React project is experiencing issues with the CSS file. The first header in the CSS file works fine, but the second header and every other class created after it are not responsive. Only the 'header' class is properly linked to Header.css file. Can someone help me resolve this problem?
Header.js file.
I have imported the CSS file correctly, but it's still not working as expected.

const Header = () =>

{ return

( <div className='header'>

<div classname="header2">

<imgsrc="gym.png"alt="" src="gym.png" </div> </div>

Header.css file

.header {

display:flex;

padding: 15px 20px;

justify-content: space-between;

position: sticky;

background-color: rgb(235, 199, 153);

z-index: 100;

top:0;

box-shadow: 0px 5px 8px -9px black rgba(0,0,0,0.752);

}

.header2>img

{

height: 10px;

}

I've tried changing names and adjusting sequences, but only .header responds in my live server.

Answer №1

The issue lies in the React className attribute which should be written as className (with the first letter capitalized).

<div className="header2">

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

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

I am currently using the chosen plugin to create multiple select input fields. You can view an example of this in action by following this link: By default, the plugin disables an option if it has already been selected. For instance, in the provided examp ...

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: https://i.sstatic.net/ ...

Configuring a devServer proxy leads to a 404 error

Within my src/vue.config.js file, I have the following configuration: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true, }, }, }, }; When I c ...

The JSONP error code 414 states that the Request-URI is too large

My attempt to transmit a large amount of data (~50000 bytes) to another server using JSONP is resulting in a 414 (Request-URI Too Large) response because JSONP only allows GET requests. Splitting the data into 2k chunks significantly slows down the entire ...

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

Positioning a div in the center horizontally may result in content with a large explicit width being

I am in search of a solution to horizontally center content on a webpage, regardless of whether or not it has a defined width. After referencing a Stack Overflow question on centering a div block without the width, I found a great method that works well w ...

My Ruby on Rails app seems to be malfunctioning in a major way

Instead of sharing code snippets, I’ve encountered difficulties in getting my jQuery code to work correctly. If you're curious, you can view the issues on Stack Overflow: Why doesn’t this jQuery code work? and This jQuery hide function just does n ...

The content within the hyperlinked text

<ul class="Buttons"> <li><a href="#" onclick="myFunc(); return false;">Accept</a></li> <li><a href="#" onclick="myFunc(); return false;">Reject</a></li> <li><a href="#" onclick="myF ...

Utilize ngClass for every individual section

I have completed the implementation of all UI components, which are visually appealing. https://i.sstatic.net/hxJQr.png Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'ye ...

Bazel: Utilizing the nodeJS_binary rule for executing "npm run start" - A Guide

Is there a way to utilize the nodejs_binary rule in order to execute a standard npm run start? While I can successfully run a typical node project using this rule, I am struggling to run the start script specified in package.json. Below is what I currently ...

Challenges with MongoDB replication speed during retrieval of documents from replica sets

My node server is experiencing performance issues when retrieving documents from my one primary and two secondary replica sets. Are there any strategies to enhance the overall performance? ...

Adjust the width of every column across numerous instances of ag-grid on a single webpage

I am facing an issue with Ag-grid tables on my webpage. I have multiple instances of Ag-grid table in a single page, but when I resize the browser window, the columns do not automatically adjust to the width of the table. We are using only one Ag-grid in ...

Yeoman - Encountering difficulties installing generators

Having trouble installing generators with Yeoman on my OSX Yosemite. Need help resolving the issue I encountered: npm ERR! Darwin 14.1.0 npm ERR! argv "node" "/usr/local/bin/npm" "install" "-g" "generator-aspnet" npm ERR! node v0.12.0 npm ERR! npm v ...

Guide on updating the data-target attribute of a button in a modal using JavaScript

I need a button inside a modal to close the current modal and open another one. However, the modal that opens is different each time, so the data-target attribute on the button must change dynamically. To close the modal, I have included data-dismiss="mod ...

Restarting a timer with React useEffect

I've been experimenting with the useEffect hook and encountered a problem that has me stumped. My simple counter example uses setTimeout inside useEffect to update values. if (countState.stopWatch === 0) { dispatch({ type: 'reset' }); ...

Having trouble resolving this technical problem in Express.js and JavaScript programming

try { console.log('11111') const { data: { tasks }, } = await axios.get('/api/v1/tasks') console.log('22222 ' + await axios.get('/api/v1/tasks') ) console.log('33333 ' + tasks) https://i.sstatic.net/mLLV ...

Display debugging information in the console using bunyan

child.log.info('info'); child.log.debug('debug'); When running the command: node app.js | bunyan -o short -l debug I am encountering an issue where only INFO messages are displayed and DEBUG messages are not showing up. I want to be ...

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

Concurrency issue when timing the encryption of bcrypt and creating a new document in MongoDB

My website has a register function that creates a new document with the user's credentials. Below is my implementation, where the input fields for username and password are stored in an object called data: let users = db.collection('users') ...