I am using the react-bootstrap library to construct a nav bar at the top of my page using Navbar import. However, the bar seems to have some padding at the bottom which I do not want and can't seem to remove, as seen here (Yellow on bottom. Also navbar component does not seem to span the entire page [as seen by white space on either side of bar]; not sure of why this is either):
I would like the bar to span the page and have no padding on the bottom.
My render method is as follows:
render() {
if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
return <div/>;
}
return (
<span className="nav-bar">
<Navbar inverse className="fixed-top collapseOnSelect nav-bar">
<Navbar.Collapse>
<Navbar.Header className="locl-link">
<Navbar.Brand>
<LinkContainer to="/">
<a>locl</a>
</LinkContainer>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<BootstrapNav>
<LinkContainer to="/about">
<NavItem active={this.linkActive("about")}>About</NavItem>
</LinkContainer>
</BootstrapNav>
<BootstrapNav pullRight>
{this.logInOut()}
</BootstrapNav>
</Navbar.Collapse>
</Navbar>
</span>
);
}
Any help would be greatly appreciated.
I didn't realise body tag has default margin; whoops
Just like #Zero wrote .navbar class has margin-bottom: 20px; property. You will need to override it or set margin-top: -20px; on element below if you want to keep it for some other view.
When it comes to padding at the right side - it's left for a vertical scroll bar. I have faced the same issue when I was using react-sidebar.
The space below navbar is coming from .navbar class in bootstrap.css. You can remove the margin-bottom: 20px; in bootstrap.css.
If you’re using bootstrap.css via CDN you can add style to your navbar, like so:
<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">
Regarding your problem with white space on either side or navbar. I think the problem is with how you render an element into the DOM. You should check the root DOM node in your HTML, maybe it has padding or margin. It could also be from the .nav-bar class in your span, or some other class.
Related
Related to this question, whose top answers no longer work. By default, the NavDropdown only appears when clicked on, however I need this dropdown to display on hover. I struggled loading 'React-Bootstrap' into stackoverflow to create a reproducible example, however here is a basic Navbar using react-bootstrap, that features my attempt to display the dropdown on hover:
const [isStatsOpen, setIsStatsOpen] = useState(true);
<Navbar>
<Navbar.Brand>
<Link to='/'>
<img alt='company logo' src={My Logo} />
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'>
<NavDropdown title='Statistics'
onMouseEnter={() => setIsStatsOpen(true)}
onMouseLeave={() => setIsStatsOpen(false)}
open={isStatsOpen}
>
<NavDropdown.Item as={Link} to='/stats/'> Stats 1</NavDropdown.Item>
<NavDropdown.Item as={Link} to='/stats2/'>Stats 2</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav className='ml-auto'>
<DivisionSelect />
<AppSelect />
</Nav>
</Navbar.Collapse >
</Navbar >
From the linked post above, there were 2 responses with 10+ votes, however neither of these solutions work. As it pointed out in one of the comments: This doesn't work in newer versions, the dropdown isn't rendered until it's first click. You'd need to trigger the onclick before you could control via css.
After inspecting the page, I can confirm that this person is correct - there is no menu for which to display until after the NavDropdown has been clicked upon. Once clicked, the menu is there, and then the solutions from this other post do work. Given this as the case, how can I resolve this issue? Is it possible for my react component to automatically "click" the Navdropdowns on load, that way the menus will appear on hover?
Thanks!
Does this help you? Old good vanilla javascript.
I added an id at NavDropdown and called the old, classic document.getElementById method and then triggered the click event.
useEffect(() => {
document.getElementById("test").click();
}, []);
<NavDropdown
id="test"
title="Statistics"
https://codesandbox.io/s/react-bootstrap-demo-z36c5
In this link to the earlier version of the question, the highly voted answer that starts with export class Nav extends React.Component { does work, so long as the open prop is updated to show.
I'm using Reactstrap to style my React/Redux app, and I'm having some trouble aligning things as I'd like; I know I'm giving up easy access to finer-grained control using the library, but I suspect there's a way to do what I want.
So, I have a basic Navbar at the top of my content (I compressed the Nav options).
<Navbar light expand={ "lg" }>
<NavbarBrand>Redacted Name</NavbarBrand>
<NavbarToggler onClick={ () => this.setState({ isOpen: !this.state.isOpen }) } />
<Collapse navbar isOpen={ this.state.isOpen }>
<Nav navbar>
<UncontrolledDropdown className={ "mr-lg-2" } nav inNavbar>
<DropdownToggle nav>
About Us
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<Link to={ "/" }>Mission Statement</Link>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
{ userOptions }
</Collapse>
</Navbar>
Now, userOptions is a form that changes based on user input, but all... forms of it take this basic inline form layout, save for differences in buttons and links inside.
<Form className={ "userStatusForm" } inline >
// Content
</Form>
Here's my issue: in the simple layout I'm using, the brand, toggle, nav, and user form pile against each other on the left. However, I'm wanting content inside the Collapse element to use a standard "justify content between" alignment to press the user form against the right side, regardless of its size. That said, I'm struggling to find what I need in the Reactstrap docs - and to phrase what I'm trying to do correctly for Google.
So, I was trying to avoid direct className assignments, since I've already decided to use the Reactstrap library, but the simplest thing involved a mr-auto class added on to the Nav component that forms the first item inside the Collapse container. Not as elegant as I'd hoped, but it's simple (and was good enough for the Navbar in the Reactstrap docs).
My code looks like following:
return (
<Container>
<div>
<Router>
<div className='menuStyle'>
<Link to="/" id="about" data-cy="about">about</Link>{' '}
<Link to="/ballrooms" id="home" data-cy="home" >ballrooms</Link>{' '}
<Link to="/schools" id="schools" data-cy="schools">schools</Link>{' '}
<Link to="/videos" id="videos" data-cy="videos">videos</Link>{' '}
<Link to="/calendars" id="calendars" data-cy="calendars">calendar</Link>{' '}
{' <'}{user.username}> logged in {' '}
<button data-cy="logout" onClick={handleLogout}>logout</button>
</div> ....
Well, this is just a little part, but here is where I want to change colour according to active link. I know that there are many ways, but the ones I think I could get working are so much of work that there must be easier way. I have used primarily semantic ui in this app.
The css menuStyle I used is just simple:
.menuStyle {
padding-top: 10;
background: lightgray;
margin-bottom: 5;
}
I suppose there must be good and simpler way to get active navbar with changing color / emphasis, but I didn't get one working.
I think what you're looking for is the NavLink component from Router. Similar to Link, but can accept styling. Check it out: Using the Link and NavLink Components to Navigate to a Route
I have simple Navbar like this:
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/`}>
Blah
</NavItem>
<NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/SomePage`}>
SomePage
</NavItem>
</Nav>
</Navbar.Collapse>
When I put cursor on NavItem its highlited but I would like it to be highlighted after I click on it, to inform me where on page I am.
So: to sumuarize, anyone knows how to keep selected navitem highlighted?
I think firstly you need to be using unique event key for each NavItem.
Nav has a prop activeKey and a handler onSelect, make use of this to set the activekey on Nav.
<Nav activeKey={(this.state.activeKey)}
onSelect={e => {e.preventDefault(); this.handleSelect(e);}>
After this, you will get an active prop on the clicked active item, so now its the time for some CSS pseudo selector.
.NavItem:active{
background-color: green; //some color of your choice//
}
My post/explanation of my problem is kind of long so I'll post the question at the top as well as at the bottom:
how can I use react-bootstrap with pug syntax when there is dot notation built into the react-bootstrap navbar?
=====================================================================
I'm following along a video tutorial to learn how to use React Bootstrap. Unlike the tutorial, however, I'm using pug-as-jsx-loader so that I can write my react components using pug syntax. Everything was working fine until we got to the navbar portion.
Here is what the code looks like:
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to='/'> Teeessst </Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} href='/' to='/'>
Home
</NavItem>
<NavItem eventKey={2} componentClass={Link} href='/about' to='/about'>
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} href='/news' to='/news'>
News
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
And here is what the code would look like if I was able to use pug syntax:
return pug`
Navbar(default, collapseOnSelect)
Navbar.Header
Navbar.Brand
Link(to='/') Ayyy
Navbar.Toggle
Navbar.Collapse
Nav(pullright)
NavItem(eventKey='{1}' componentClass='{Link}' to='/') Home
NavItem(eventKey='{2}' componentClass='{Link}' to='/about') About
NavItem(eventKey='{3}' componentClass='{Link}' to='/news') News
`
Now, the bottom example still rendered a navbar to the page, but it was 'broken' in the sense that the buttons weren't in the right place, and didn't do anything when you click them. The top example DOES work, but I'd like to be able to use the bottom example instead.
I believe the problem is because a dot in pug syntax indicates a classname. So for Navbar.Header pug thinks that should be Navbar class='Header'
I thought I could try to fix this problem by changing some of the source code in react-bootstrap. I found that in the Navbar.js file from the bootstrap code there is this snippet at the bottom:
UncontrollableNavbar.Brand = NavbarBrand;
UncontrollableNavbar.Header = NavbarHeader;
UncontrollableNavbar.Toggle = NavbarToggle;
UncontrollableNavbar.Collapse = NavbarCollapse;
export default bsStyles([Style.DEFAULT, Style.INVERSE], Style.DEFAULT,UncontrollableNavbar);
So it seemed to me that it was exporting an object called UncontrollableNavbar which had properties which were simply from other files. I looked in the directory, and it had all of those files there, so I thought I could change my code from this:
import {Navbar, Nav, NavItem} from 'react-bootstrap'
// skip some lines
<Navbar.Header>
// skip some lines
To this:
import {Navbar, Nav, NavItem, NavbarHeader} from 'react-bootstrap'
// skip some lines
<NavbarHeader>
// skip some lines
Webpack and babel are able to load this just fine, however the page does not show anything because there's this error in the Chrome console: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I'm assuming this error is something to do with the state of the Navbar? Like the reason it uses dot notation is maybe because it needs to pass data to the children, but if I use a seperate tag instead of Maybe it's not able to pass the data properly, and crashes the app?
Basically, my question is, how can I use react-bootstrap with pug syntax when there is dot notation built into the react-bootstrap navbar?
You can have a reference for each subcomponent:
import {Navbar, Nav, NavItem} from 'react-bootstrap'
const Header = Navbar.Header;
...other consts...
return pug`
Navbar(default, collapseOnSelect)
Header
Brand
Link(to='/') Ayyy
Toggle