React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn't achieve the desired outcome.

 <Nav className="mr-auto">
    <Nav.Link href="#features">Home</Nav.Link>
    <NavDropdown title="Inventory">
      <NavDropdown.Item
        href="#action/3.1"
        style={{ backgroundColor: "black", color: 'white' }}
      >
        Products List
      </NavDropdown.Item>
      <NavDropdown.Item
        href="#action/3.2"
        style={{ backgroundColor: "black", color: 'white' }}
      >
        Top View Products
      </NavDropdown.Item>
      <NavDropdown.Item
        href="#action/3.3"
        style={{ backgroundColor: "black", color: 'white' }}
      >
        Add Products
      </NavDropdown.Item>
    </NavDropdown>
  </Nav>

Despite implementing the above code, the output still displays white backgrounds at the top and bottom as shown in the image below.

cssreactjsreact-bootstrap

Answer №1

Customize the Bootstrap stylesheet for a unique look

.nav-item .dropdown-menu {
  background: #000000;
}

.nav-item .dropdown-item {
  color: #ffffff;
}

.nav-item .dropdown-item:hover {
  background: #f0ad4e;
}

Answer №2

<Navbar collapseOnSelect expand="lg" bg="white" fixed="top">
        <Container>
        <Navbar.Brand href="#home"><img className="logo mb-2" src={image4}  /></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="ms-auto text-center">
            <Nav.Link href="#features">Home</Nav.Link>
            <Nav.Link href="#features">About</Nav.Link>
            <Nav.Link href="#pricing">Services</Nav.Link>
            <Dropdown as={NavItem}>
              <Dropdown.Toggle as={NavLink}>Courses</Dropdown.Toggle>
              <Dropdown.Menu variant="dark">
                <Dropdown.Item href="#action/3.1">PROFESSIONAL CHEF</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">COOKING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">FASHION DESIGNING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">HOUSE KEEPING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">FNB SERVICE</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">BEAUTIFICATION</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            <Nav.Link href="#pricing">Blog</Nav.Link>
            <Nav.Link href="#pricing">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
        </Container>
      </Navbar>

This snippet will generate the following output:

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

Tips on using CSS to hide elements on a webpage with display:none

<div class="span9"> <span class="disabled">&lt;&lt; previous</span><span class="current numbers">1</span> <span class="numbers"><a href="/index/page:2">2</a></span> <span class="num ...

javascriptjqueryhtmlcss

Sharing properties between sibling components (React)

Currently, I have a functional component that looks like this: import React from 'react' function Header(){ return( <div className='header'> <h2>Logo</h2> <p>Log In</p> ...

reactjs

Exploring the possibilities of using React for looping?

I have integrated Dexie.js with React for this specific example. However, the implementation details are not of great importance to me. My main focus is on finding out how to iterate through all objects in my IndexDB database using React. In the code snip ...

javascriptreactjs

(Material UI version 5) Custom global style enhancements

One of the examples in MUI is the Global style overrides: const theme = createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { // Name of the slot root: { // Some CSS fontSize ...

cssreactjsmaterial-ui

Unable to turn off X-Powered-By: Express

After attempting to use app.disable("x-powered-by"); without success, I came across some helpful posts on the topic: how to remove X-Powered-By in ExpressJS Can't get rid of header X-Powered-By:Express I am using "express": "^4.16.4" as backend a ...

javascriptnode.jsreactjsexpress

I recently started learning Next.js and I'm interested in organizing my website with multiple page folders but still using a single dynamic route labeled as [id]

my-nextjs-app/ |-- .next/ |-- node_modules/ |-- public/ |-- src/ | |-- components/ | |-- men/ | | |-- [id]/ | | |-- page.tsx # Specific ID static page for Men's category | | |-- page.tsx # General stat ...

javascriptreactjsnext.js

Navigating within a React application - rendering JSX components based on URL parameters

As I work on developing a web-app with a chapter/lesson structure, I have been exploring ways to handle the organization of lessons without storing HTML or React code in my database. One idea I had was to save each lesson as a .jsx file within a folder str ...

javascriptnode.jsreactjsroutes

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

c#htmlcsstwitter-bootstrapasp.net-core-mvc

The transformation of href to data-href is now complete

Recently, I encountered an unusual issue in my Next JS application. I included Google Fonts using the code snippet below: <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Source+Serif+Pro:wght@300;400;500& ...

reactjsfontsnext.jshrefgoogle-webfonts

Tips for adjusting the color of a linear gradient in a shimmer effect

I have a puzzling question that I just can't seem to solve. My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, t ...

css

After updating to version 11 of Next.js, encountered an error due to an unsupported file type: undefined

While attempting to load an image after updating Next.js to version 11 using the code below: import segmentLogoWhitePng from 'assets/images/my-image.png' I encountered the following error message: TypeError: unsupported file type: undefined (fil ...

reactjswebpacknext.js

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

What is the reason for the error that is being caused by using arrow functions in my code

I'm currently working on a React application, but I keep running into errors that are causing issues. Here is the code snippet in question: import React from 'react'; import { Link } from 'react-router-dom'; const LINKS = [ { to ...

javascriptreactjs

React - Customizable Counter Components - Control All Counters with Parent Component

Hello everyone, I'm fairly new to React and still in the learning process. Currently, I have a challenge that involves creating a simple React Counter app with some specific requirements. The challenge is to build the app without using Redux or hooks. ...

reactjscomponentsparent-childcounter

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

javascripthtmlreactjsnext.jsnextjs-image

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...

htmlcss

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

When using Webpack, there may be difficulties resolving relative path import of express static files

I am currently developing an Outlook add-in with an Express server running. To ensure compatibility with Outlook Desktop, I need to transpile JavaScript to ES5 using Webpack. Below is the simplified structure of my project: /public /javascripts ssoAu ...

javascriptnode.jsreactjsexpresswebpack

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts