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
Related
I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm tried below code:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
please give me your valuable suggestion.
The easiest solution may be to wrap your NavLink with a native html element. In your case:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>
From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.
Add passHref attribute in Link.
Wrap your custom function component with React.forwardRef.
However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.
This worked for me:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
Instead of using the NavbarBrand component I just added the class navbar-brand
Solution :
Wrapp with anchor tag (a tag)
use passHref attribute
<Link href='/' passHref>
<a>
<Image src='logo.png' width="50px" height="50px" />
</a>
</Link>
Wrapping the child component in an a (anchor) tag resolved my issue.
Steps to reproduce :
Wrap around a component with the Link tag from Next JS
import Link from 'next/link'
import Image from 'next/image'
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
Solution :
passing the 'important' passHref attribute
Wrapping the entire children in a a tag
There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>
Just Wrap it in anchor tag. it will work fine.
<Link href="/">
<a>{APP_NAME}</a>
</Link>
In React I want to either change the toggler completely or at least change the color. I've tried the solutions on the below links with no luck.
5 Years Ago
1 Year Ago
1 Month Ago
I can see the code in the dev tools but it's crossed out, does this mean it's being overidden by Bootstrap?
Here is my NavBar.js file:
import React, { Component } from "react";
import logo from "../images/logo.png";
import { Nav, Navbar, NavDropdown, Form, FormControl, Button, Container } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css';
export default class NewNav extends Component {
render() {
return <div className="myContainer">
<Navbar id="navbar" className="newNav" expand="lg">
<Navbar.Brand href="/"><img id="logo" src={logo} alt="Company Name"/></Navbar.Brand>
<Navbar.Toggle className="custom-toggler" aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link id="nav-links" href="/cleaning-services">Services</Nav.Link>
<Nav.Link href="#link">About</Nav.Link>
<Nav.Link href="#link">Something Else</Nav.Link>
<Nav.Link href="#link">One more then</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
}
}
This is my CSS for the custom-toggler in <Navbar.Toggle
.navbar-light .navbar-toggler-icon {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
}
Any help would be appreciated
In the end I decided to create my own image using Canva and reference the image in the CSS URL and add the !important tag. Details are below is anyone stumbles across this.
.navbar-light .navbar-toggler-icon {
background-image: url("../src/images/alignRight.svg") !important;
border-color: var(--secondaryColor) !important;
}
I also changed the border to transparent to get my final button as seen below.
I've looked for the solution of my problem, but can't find a way to fix the situation without using a custom css class.
I'd like to know if it is possible to do what I'm looking for using only flex classes.
I've this simple navbar component:
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
<Nav className="mr-left">
<Nav.Item >
<Timer/>
</Nav.Item>
</Nav>
</Navbar>
Where TIMER is a simple <p>text</p>.
Is it possible to vertically align this text with align-self: center?
I can't fully get what it is happening.
I've found a way, but I do not like it so much because I've substituted Nav.Item with Nav.Link.. this is not so good:
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<Nav.Link className="disabled ml-auto">
<Timer/>
</Nav.Link>
</Nav>
</Navbar>
Before I was using 2 nav inside navbar, honestly I do not know how much it is correct.. Instead now I'm using just one NAV but I can't set it as large as the NAVBAR to move the Timer on right
I want to make static navbar which does not follow user on sroll.Is there any way to do it in
react-bootstrap?
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Button className={'bootstrapProfile'} variant="outline-info">
<Link key={uuidv4()} to={`/profile/${user.id}`}>
My Profile
</Link>{' '}
</Button>
<Button
className={'bootstrapNewTopic'}
variant="outline-info"
onClick={() => {
history.push('/posts');
}}
>
New Topic
</Button>
</Nav>
<Button variant="outline-info" onClick={() => LogOut()}>
Log Out
</Button>
</Navbar>
I tried to give it classname fixed-top but it did not work.
Please help
It seems like you are using react-bootstrap component Navbar. If that is correct instead of giving class in the component you can try.
<Navbar bg="dark" variant="dark" fixed="top">
Make a class say fixed-top-nav. And use position: sticky property to stick it on the top. Add this class to your navbar
.fixed-top-nav {
position: sticky;
top: 0;
}
If you don't want the navbar to follow the user as they scroll, you don't need to add any special props to the Navbar.
Codesandbox demo
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?