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;
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.