I want to use NavLink instead of Nav.Link in my react-bootstrap navbar so I can use the activeClassName prop. However it seems that all the links lose their alignment, there is no longer any horizontal margin between them and they are not centered vertically in the navbar:
code as follows:
function NavbarDefault() {
return (
<Container>
<Navbar variant="custom" expand="md">
<Navbar.Brand as={NavLink} to="/">
<img
className="navbar-logo-image"
src={logo} alt="Brand Logo" />
<span className="navbar-logo-text">cool brand</span>
</Navbar.Brand>
<Navbar.Toggle
className="navbar-toggler-custom"
aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/features">Features</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/pricing">Pricing</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/contact">Contact</NavLink>
<SecondaryButton
className="navbar-login-button">
Try now
</SecondaryButton>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
);
}
and CSS:
.nav-link-custom {
color: #41a2fb;
}
.nav-link-custom:hover {
color: #0681EF;
text-decoration: none;
}
.nav-link-custom-active {
color: red;
}
Originally I tried to solve this problem by using something like <Nav.Link as={NavLink} ....... this worked for the navigation and alignment however the activeClassName prop doesn't work that way, so I had to revert to NavLink. How can I center these nav links vertically in the navbar?
Related
Hi I'm trying to get scrollspy working on React using Bootstrap but I seem to struggle to make it work.
I have tried several ways to do this but I really have no idea how to make this work and it'll be much appreciate if you can help me with this...
This is the css
body {
margin: 0;
font-family: "Roboto", sans-serif !important;
scroll-behavior: smooth;
overflow-x: hidden;
position: relative;
height: 100%;
}
This is body in index.html
body
data-bs-spy="scroll"
data-bs-target="#navbar-menu"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0"
This is in Navbar component and inside Menu component I'm assigning the hrefs
<Navbar
id="navbar-menu"
className="py-2 py-md-0 bg-white"
expand="lg"
sticky="top"
>
<Container>
<NavbarBrand classes="" />
<Navbar.Toggle aria-controls="basic-navbar-nav" className="border-0" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Menus classes="top-nav px-3 mx-2 px-md-2 py-md-4 mx-md-1 mb-3 mb-md-0" />
</Navbar.Collapse>
</Container>
</Navbar>
Inside Menu
<Nav className="flex-wrap flex-lg-nowrap me-3">
{navMenu.map((menu, index) => (
<Nav.Link
href={menu.href}
key={menu.href}
>
{menu.name}
</Nav.Link>
))}
</Nav>
I have Landing component that hold everything and inside each wrapper there's id name as same as the nav menu
const Landing = () => {
return (
<>
<NavbarMenu />
<HeroWrapper />
<AboutWrapper />
<EcosystemWrapper />
<TokenomicsWrapper />
<TeamWrapper />
<FooterNav />
</>
);
};
export default Landing;
How to change text color in css class styles.links?
If i write color: white inside css style sheet it doesnt work. Works when write style={{color:'white'}} in line only. Other styles works so it seems that color is overwritten by bootsrap.
Styles in next are very painfull. What is best way to work with css in your opinion?
<Navbar className={home ? styles.homeNavbar : styles.mainNavbar } collapseOnSelect expand="lg" variant={home?"dark":"light"}>
<Container>
<Link href="/"><Navbar.Brand>Brand text</Navbar.Brand></Link>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Link href="/contact" passHref>
<Nav.Link style={{color:'white'}} className={styles.links}>contact</Nav.Link>
</Link>
<Link href="/typesOfPages" passHref>
<Nav.Link style={{color:'white'}} className={styles.links}>portfolio</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
so I'm trying to create my app using react bootstrap and I want to change the backgroundColor to my desired ones + I want to move the link tag to the right side, I believe in normal HTML we can achieve it by typing class="justify-content-end" but I cant find the way to do it. Can anyone help me please ? Thanks before.
Here's my code:
import "../styles/Header.css"
import { Navbar, Nav} from "react-bootstrap"
function header() {
return (
<div>
<Navbar bsClass="custom-navbar" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end">
<Nav.Link href="#facilities">Facilities</Nav.Link>
<Nav.Link href="#room">Room</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
My Header.css:
.custom-navbar{
background-color: #10255A;
}
Currently, flex direction of the <Nav> is column which mean you have to use align-items-end to move link tags to the right
<Nav className="justify-content-end align-items-end">
Codesandbox
I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs.
Here is the link:- https://react-bootstrap.github.io/components/tabs/ (It is the vertical tab menu)
I have used the code shown there.
<Tab.Container id="sidebar" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first" className="tab">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second" className="tab">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third" className="tab">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<h1>One</h1>
</Tab.Pane>
<Tab.Pane eventKey="second">
<h1>Two</h1>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
How can I change the background of the active tabs using CSS or bootstrap?
Please help.
Thank you.
as #Tim suggested its also 100% correct when you choose variant="pills" but default is variant="tabs"
For Tabs
.nav.nav-pills .nav-link.active {
background-color: <YOUR_COLOR>
}
For Pills
.nav.nav-tabs .nav-link.active {
background-color: <YOUR_COLOR>
}
I want to style the icon-barof a react-bootstrap's Navbar component to have a background-color: white;. However, my webpack scss loader does not allow me to style CSS classes with dashes, I can only use camel case. This is my webpack config:
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
I prefer not to change this config. Instead I would like to change my JSX so I can attach a custom class to the icon-bar element. How do I do this?
Home.scss
.navbar {
.icon-bar {}
}
Home.js
<Navbar fixedTop fluid className={styles.navbar}>
<Navbar.Header>
...
</Navbar.Header>
<Navbar.Collapse eventKey={0}>
<Nav navbar className="navbar-right">
<LinkContainer to="/how-it-works">
<NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
a simple solution is put the navbar in wrapper element, like this :
<div className={styles.navbar}>
<Navbar fixedTop fluid>
<Navbar.Header>
...
</Navbar.Header>
<Navbar.Collapse eventKey={0}>
<Nav navbar className="navbar-right">
<LinkContainer to="/how-it-works">
<NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>