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
Related
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
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 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?
I have a react-bootstrap component and the loading animation will not play.
Also, the button wont center. I can use margin-left: 30px; to move it closer to the center but I dont want that as a solution because on bigger screens it goes off center. For the positioning, I am using an imported CSS file.
import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import Button from 'react-bootstrap/Button'
class Button extends React.Component{
......rest of react component........
return(
<div>
<ButtonToolbar >
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
</div>
Does anyone know what I am doing wrong or what I am not doing at all? Thank you for your time.
You can center align your bootstrap button by modifying its container, here the <ButtonToolbar>
Like so:
<ButtonToolbar className="text-center d-block">
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
For the spinner, do you have any React Error?
I'm new to web development, and I'm trying to customize the colors of a react-bootstrap Navbar.
This is the contents of my NavbarComponent.cs file:
var React = require('react');
var ReactDOM = require('react-dom');
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Button from 'react-bootstrap/lib/Button';
import styles from './Navbar.css'
export default class NavigationBar extends React.Component {
render() {
return (
<Navbar brand="react-bootstrap" className={styles.navbar}>
<Nav bsStyle="tabs" activeKey="1" onSelect= {this.handleSelect}>
<NavItem className={styles.navitem} eventKey={1} href="#">Thing 1</NavItem>
<NavItem className={styles.navitem} eventKey={2} href="#">Thing 2</NavItem>
</Nav>
</Navbar>
);
}
}
and this is my css override file, Navbar.css:
:local(.navbar) {
background:#2E5F91;
color:white !important;
}
:local(.navitem) {
color:white !important;
}
The background color of the Navbar changes just fine, but I can't get the text color to change, even using the !important tag (which is dangerous, I know).
Looking at the elements in the resulting page:
<li role="presentation" class="BV2R0XKa1lLedUhy9CO2p" data-reactid=".1.1.0.0.$/=10">
Thing 1
</li>
it looks like my class isn't getting deep enough. How can I fix this?
Thank you!
Welcome to web development, hope you will like as much as we do !
I am not familiar with the css pseudo-class :local, I am curious why not use usual css class ?
.navItem {
color: white;
}
I think the component NavItem does not have a className property
(source : https://react-bootstrap.github.io/components.html#navs-props-navitem)
So maybe that's why it doesn't work, not sure though... I would have done it like this :
<NavItem eventKey={2} href="#">
<span className="navItem">Thing 2</span>
</NavItem>
Here's a jsfiddle: http://jsfiddle.net/u4g5x93w/1/
you can solve this problem by putting
<link rel="stylesheet" href="../Navbar.css">
to the index.html in your project. And also give specific path for Navbar.css in your index.html. then edit what you like.
<Navbar collapseOnSelect expand="lg" bg="light" variant="light" >
.navbar-nav .nav-item a {
color: white !important;
}