Question

144

How to change the hover effect for react-bootstrap navbar link?

rated 0 times [ 145] [ 1] / answers: 1 / hits: 7084 / 4 Years ago, fri, october 30, 2020, 12:00:00

I want to change the hover effect from white to green colour, but I cant sem to find the exact css code for it.

<Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate-navbar nav-theme justify-content-between">

                <Navbar.Brand href="#home" className='logo'>Anis Agwan</Navbar.Brand>

                <Navbar.Toggle aria-controls="responsive-navbar-nav" />

                <Navbar.Collapse id="responsive-navbar-nav">

                    <Nav className="ml-auto">

                    <Nav.Link href="#home">Home</Nav.Link>

                    <Nav.Link href="#about">About Me</Nav.Link>

                    <Nav.Link href="#timeline">Timeline</Nav.Link>

                    <Nav.Link href="#projects">Projects</Nav.Link>

                    <Nav.Link href="#skills">Skills</Nav.Link>

                    <Nav.Link href="#contact">Contact</Nav.Link>

                    </Nav>

                </Navbar.Collapse>

            </Navbar>

This is my CSS part

.nav-theme {

    background-color: #212121;

    font-size: 20px;

    

}



.animate-navbar {

   box-shadow: 1px 1px 1px hsla(240, 20%, 8%, 0.973);

   animation: moveDown 0.5s ease-in-out;

   

}





.logo {

  color: #64dd17;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janayr

Add To Favorites

Follow

Total Points: 80

Total Questions: 80

Total Answers: 114

Location: Venezuela

Member since Sat, Aug 22, 2020

4 Years ago

janayr questions

1 NestJS - Increase response timeout for particular http endpoint

Thu, May 19, 22, 00:00, 2 Years ago

1 How to use Lazy query with React-query?

Wed, Dec 29, 21, 00:00, 2 Years ago

1 Discord JS - interactionCreate and messageCreate

Sun, Oct 31, 21, 00:00, 3 Years ago

1 Circling motion animation in React Native

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Show autocomplete only after 3 entered chars in < datalist> field?

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 4 Years ago louiemarvinm · Accepted Answer

Here is some CSS that could help.

.nav-links {

display: inline-block;

height: 20px;

background-color:white;/*will change background-color of element */

color: green; /*will change color of text within the element */

}



.nav-links:hover {

background-color:green; /*will change background-color of element on hover */

color: white; /*will change color of text within the element on hover */

}

<Navbar fixed='top' collapseOnSelect expand=md variant=dark class=navbar>

                <Navbar.Brand href=#home className='logo'>Anis Agwan</Navbar.Brand>

                <Navbar.Toggle aria-controls=responsive-navbar-nav />

                <Navbar.Collapse id=responsive-navbar-nav>

                    <Nav className=ml-auto>

                    <Nav.Link class=nav-links href=#home>Home</Nav.Link>

                    <Nav.Link class=nav-links href=#about>About Me</Nav.Link>

                    <Nav.Link class=nav-links href=#timeline>Timeline</Nav.Link>

                    <Nav.Link class=nav-links href=#projects>Projects</Nav.Link>

                    <Nav.Link class=nav-links href=#skills>Skills</Nav.Link>

                    <Nav.Link class=nav-links href=#contact>Contact</Nav.Link>

                    </Nav>

                </Navbar.Collapse>

            </Navbar>