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.

https://i.sstatic.net/ZdOvO.png

cssreactjsreact-bootstrap

Answer №1

Customize the Bootstrap stylesheet for a unique look

https://i.sstatic.net/2pFZJ.png

.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:
https://i.sstatic.net/Rq1Oi.png

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

What is the best way to trigger the OnChange function in React when using Formik and Ant Design components together?

Is there a way to call a custom function on a Formik field when using the onChange event? I've tried calling it but it's not working as expected. Below is my custom function within a React Component: onStudentScore = (value, form) => { ale ...

reactjsantdformikyup

Ensuring even distribution of three divs within a container

Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...

htmlcss

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

javascripthtmljquerycss

Error occurs when React Native picker's selected value returns as undefined, resulting in an "undefined is

I am facing an issue with the code snippet below that involves a picker and sending the selected value to an API call. I keep encountering the error message "Possible Unhandled Promise Rejection (id: 1):undefined is not an object (evaluating 'this.sta ...

reactjsreact-nativereact-android

After pressing the button to access the sidebar, all I see is a plain white screen

I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...

javascripthtmlcss

Issue with React Router functionality not functioning

I am currently facing an issue with my react-router setup. You can find the code I am using by visiting this link - https://github.com/rocky-jaiswal/lehrer-node/tree/master/frontend Although it is a basic setup for react-router, I am experiencing difficu ...

javascriptreactjsreact-router

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

Error: Unable to access properties of null (specifically 'get') in a Next.js and Mongoose project

Working on an ecommerce project using nextjs, mongoose, and a jwt token stored in a cookie. Encountering the following error: TypeError: Cannot read properties of null (reading 'get') https://i.stack.imgur.com/vErL1.png models/order.js : import ...

node.jsreactjsmongodbmongoosenext.js

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. https://i.sstatic.net/Ce216.png The project is being developed in next.js. Below are the relevant co ...

cssreactjsnext.jshtml5-canvaspolygon

Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason. You can view the JSFiddle here: http://jsfiddle.net/KSs7V/ Any suggestions on how this padding might have been added and how to correct it? CSS: .artist ...

htmlcss

What is the best way to modify the body's background color?

I am currently working with React.js and I am struggling to change the background color of my entire page. Any advice on how I can achieve this would be greatly appreciated. Thank you. Update (Sep 2 '18): Sharing a project on GitHub that I have been ...

reactjs

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

What is the best way to add borders to table cells that have a non-zero value

I am trying to create a table using a function and it currently looks like this: table { border: 1px solid; } td { width: 30px; height: 30px; text-align: center; } <table> <tr> <td>2</td> <td>0</td> ...

htmlcsshtml-table

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

I have been working on the following HTML layout using Bootstrap 4, but I've hit a snag with one element. Check out the design preview below: https://i.sstatic.net/V3tzT.png The HTML code is as follows: <section class="hm_sc_1"> < ...

htmlcssbootstrap-4

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Encountering a Sass Dart error "Bad state: Can't access parent outside of a module" while running npm start in a Create React App

My team has come across an unusual error while attempting to npm start a Create React App we are working on. The error message states: Bad state: Can't access __parent outside of a module, resulting in a failed Build process. This issue is new to us, ...

javascriptnode.jsreactjsnpm

Why does "height: auto;" not function properly when I implement "float:left"?

I have set up three responsive columns and now I want to add a wrapping div for them. Although I have created the wrap div, it seems to only work with pixel values. I would prefer to use percentages or auto as I am aiming for a responsive layout. For exa ...

htmlcss

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices. For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I&apo ...

htmlcssfrontendmedia-queriesbootstrap-5

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

htmlcssdisplayobject-fit