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;
Related
i installed the react-bootstrap module using the pm command then imported it in my _app.js file now when i tried to change the bootstrap code i wasnt able to do so
my navbar component provided by bootstrap is this
import Image from 'next/image'
import {
Nav,
Navbar,
NavDropdown,
Form,
Button,
FormControl,
Container,
} from "react-bootstrap";
import headerStyles from '../styles/Header.module.css'
//${headerStyles.navLinks}
export default function NavBar() {
return (
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container fluid>
<Navbar.Brand href="#">
<Image src={'/logo.png'} height = "30px" width="190px"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className={"me-auto my-2 my-lg-0 " + headerStyles.navLinks}
style={{ maxHeight: "100px" }}
navbarScroll
>
<Nav.Link className={headerStyles.navLinks_l} href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className={"me-2"}
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
here I want to try to customize the CSS of bootstrap which I tried doing with CSS module but I failed. Then I used a global stylesheet to do so but failed
can someone please help me with this?
global css:
.navbar-collapse{
background-color: aqua;
color: black;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(0, 0, 0);
background-color: blue;
}
.navbar-expand-lg .navbar-nav{
justify-content: space-around;
margin: 0px;
}
.me-auto{
margin: 0 !important;
}
Import global.css after importing bootstrap in _app.js
import "bootstrap.min.js"
import "global.css"
using !important is not a good choice. explanation here
I'm having some problems lining up some React Bootstrap cards, the only way I could align them horizontally was by putting them both inside a div, but I need a component for each card, if I ran the code that way, it would end up going wrong
Basically, every time I add a card, it's aligned vertically, not horizontally.
HostingCard.tsx
import { Card, Button } from "react-bootstrap";
import "./App.css";
export default function HostingCard() {
return (
<div className="main">
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="https://picsum.photos/200" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
}
App.tsx
import React from "react";
import "./App.css";
import Header from "./Header";
import HostingCard from "./HostingCard";
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<HostingCard />
<HostingCard />
</div>
);
}
App.css
.main {
display: flex;
flex-direction: row;
margin: 0.1rem;
padding: 1rem;
}
flexDirection: row applies to the children inside the row. You're creating a column of rows where each row contains only one item in each.
For the row to work as a row it needs to be a container for the cards, something like this:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<div style={{ flexDirection: 'row', /* ...more styles */ }}>
<HostingCard />
<HostingCard />
</div>
</div>
);
}
Since you're already using React Bootstrap, you can browse its Layout docs and choose something suitable that they already built instead of styling your own div.
Horizontal Stack looks like what you want:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<Stack direction="horizontal" gap={4}>
<HostingCard />
<HostingCard />
</Stack>
</div>
);
}
Look at its implementation and you'll see it's ultimately a div container with flexDirection: row plus a bunch of additional preset options and styles.
I am trying to use Routes to change pages in a React app. Here is my App.js:
import './App.css';
import Notifications from "./Components/Notifications";
import Home from "./Components/Home";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<header className="appHeader">
<Link to="/" className="logoLink">
<img className="logo"/>
</Link>
<div className="headerLinks">
<li>
<Link className="notificationsLink" to="/notifications"> Notifications </Link>
</li>
<li>
<Link className="updatesLink" to="/updates"> Updates </Link>
</li>
<li>
<Link className="searchLink" to="/search"> Search </Link>
</li>
<Route path="/" component={Home} />
<Route exact path="/notifications" component={Notifications} />
<Route path="/updates" component={Notifications} />
<Route path="/search" component={Notifications} />
</div>
</header>
</Router>
</div>
);
}
export default App;
Here is the css for the logoLink:
.logoLink {
background-color: pink;
width: 55px;
height: 55px;
left: calc(50% - 27.5px);
position: relative;
display: inline-block;
margin-top: 2.5px;
}
The link is 55px by 55px and all of it should be clickable. But only half of it (I would assume 27.5px) is clickable. Here are images showcasing this:
Unclickable
Clickable
As you can see only the left half of the link is clickable. How can I fix this?
the first thing that you should know that you were wrong is this:
<img className="logo"/>
img tags wants src attribute.
Well I guess You forgot about Switch also I made a working codeSandbox of your code cuz I think you might have not export default your components(like Notificatios,Home,etc), here is the link and here is the App.js code:
import "./App.css";
import Notifications from "./components/Notifications";
import Home from "./components/Home";
import Updates from "./components/Updates";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<header className="appHeader">
<Link to="/" className="logoLink">
<img className="logo" src="#" alt="HomeLogo" />
</Link>
<div className="headerLinks">
<li>
<Link className="notificationsLink" to="/notifications">
{" "}
Notifications{" "}
</Link>
</li>
<li>
<Link className="updatesLink" to="/updates">
{" "}
Updates{" "}
</Link>
</li>
<li>
<Link className="searchLink" to="/search">
{" "}
Search{" "}
</Link>
</li>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/notifications" component={Notifications} />
<Route path="/updates" component={Updates} />
<Route path="/search" component={Notifications} />
</Switch>
</div>
</header>
</Router>
</div>
);
}
export default App;
I fixed it by using left: 50% and transform: translateX(-50%) rather than left: calc(50% - 27.5px);. Still don't know why left: calc(50% - 27.5px); doesn't work, but this is a solid workaround
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?
My problem is that justify-content: space-between seems doesnt work in my code.
import React from 'react';
import {Button, Navbar, Nav, NavDropdown} from 'react-bootstrap';
import '../styles/headerStyle.scss';
const Header = () => (
<React.Fragment>
<Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
<Navbar.Brand href='#home'>React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav>
<div className='container'>
<Nav.Link>Features</Nav.Link>
<Nav.Link>Pricing</Nav.Link>
<NavDropdown title='Dropdown' id='collasible-nav-dropdown'>
<NavDropdown.Item href='#action/3.1'>Action</NavDropdown.Item>
<NavDropdown.Item href='#action/3.2'>
Another action
</NavDropdown.Item>
<NavDropdown.Item href='#action/3.3'>Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href='#action/3.4'>
Separated link
</NavDropdown.Item>
</NavDropdown>
<Nav.Link>More deets</Nav.Link>
<Nav.Link eventKey={2} href='#memes'>
Dank memes
</Nav.Link>
</div>
</Nav>
</Navbar.Collapse>
</Navbar>
</React.Fragment>
);
export default Header;
Here is stylesheet:
.container {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
Here is my current result:
current header
Here is the tutorial I follow, I am not sure where do I make mistakes in my code. Thanks in advance for any help!