I'm trying to right align a navbar item (Contribute) within a navbar.js but I can't seem to figure it out. The navbar is a React component and looks like the following,
navbar.js here
import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
var ReactDOM = require('react-dom');
// create classes
var NavBar = React.createClass({
render: function(){
return(
<nav className="navbar navbar-inverse navbar-static-top">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
</div>
<div className="collapse navbar-collapse" id="navbar-collapse">
<NavMenu links={this.props.links} />
</div>
</div>
</nav>
);
}
});
var NavBrand = React.createClass({
render: function(){
return (
<Link to={ this.props.linkTo }>
<span className="navbar-brand">{this.props.text}</span>
</Link>
);
}
});
var NavMenu = React.createClass({
render: function(){
var links = this.props.links.map(function(link){
if(link.dropdown) {
return (
<NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} />
);
}
else {
return (
<NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
);
}
});
return (
<ul className="nav navbar-nav">
{links}
</ul>
);
}
});
var NavLinkDropdown = React.createClass({
render: function(){
var active = false;
var links = this.props.links.map(function(link){
if(link.active){
active = true;
}
return (
<NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
);
});
return (
<ul className="nav navbar-nav navbar-right">
<li className={"dropdown" + (active ? "active" : "")}>
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{this.props.text}
<span className="caret"></span>
</a>
<ul className="dropdown-menu">
{links}
</ul>
</li>
</ul>
);
}
});
var NavLink = React.createClass({
render: function(){
return(
<li className={(this.props.active ? "active" : "")}>
{/*<a href={this.props.linkTo}>{this.props.text}</a>*/}
<Link to={ this.props.linkTo }>
<span className="NavLink">{this.props.text}</span>
</Link>
</li>
);
}
});
module.exports = NavBar;
Presently, my navbar looks like the following,
The best and easiest approach which works is to add following class to the NAV node like following:
<Nav className="ml-auto">
Unfortunately adding "pullRight" wasn't the solution and it won't work.
This one works for me
<Navbar>
<Navbar.Brand href="/">MyBrand</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="justify-content-end" style={{ width: "100%" }}>
...
</Nav>
</Navbar.Collapse>
</Navbar>
The other way you could do it is:
<Nav className="ms-auto">
Unfortunately adding "pullRight" wasn't the solution and it won't work.
If you want to make your navigation look something like as shown in below screen shot:
Then you would need to apply the class container-fluid on Nav and class ml-auto on the Nav.Item on the navigation item which you wish to right align.
Below is the code:
<Navbar bg="dark" variant="dark">
<Nav className="container-fluid">
<Nav.Item>
<Navbar.Brand as={Link} to="/">Demo App</Navbar.Brand>
</Nav.Item>
<Nav.Item>
<Nav.Link as={Link} to="/user-list">User List</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link onClick={handleClickUserLogOut}>Log Out</Nav.Link>
</Nav.Item>
<Nav.Item className="ml-auto">
<Nav.Link>Hi fname lname!</Nav.Link>
</Nav.Item>
</Nav>
</Navbar>
For those with version 5 of bootstrap, we have to use ms-auto instead of ml-auto because there has been migration and changes in the class name.
.ml-* and .mr-* to .ms-* and .me-*
In Bootstrap 5 you can use use ms-auto instead of ml-auto or mr-auto
This is working for me on version - 'v2.0.0-rc.0 (Bootstrap 5.1)'
<Nav className='ms-auto'>
complete,
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='ms-auto'>
<Nav.Link href='/cart'>Cart</Nav.Link>
<Nav.Link href='/login'>Sign In</Nav.Link>
</Nav>
</Navbar.Collapse>
use the class navbar-right the reach what you want
The below code solved my issue of alignment.
var NavMenu = React.createClass({
render: function(){
var links = this.props.links.reduce(function(acc, current){
current.dropdown ? acc.rightNav.push(current) : acc.leftNav.push(current);
return acc;
}, { leftNav: [], rightNav: [] });
return (
<div>
<ul className="nav navbar-nav">
{links.leftNav.map( function(link) {
return <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
})}
</ul>
{
links.rightNav.length > 0 ?
<ul className="nav navbar-nav navbar-right">
{
links.rightNav.map( function(link) {
return <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} />
})
}
</ul> : false
}
</div>
);
}
});
So far, I've discovered an easier way to do it from their official documentation, though it may be a little unconventional.
Here's the code
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
{/*This totally empty navbar with the class 'me-auto' is significant. */}
<Nav className="me-auto">
</Nav>
{/*It is responsible for the other nav bar content moving to the right.*/}
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
Sample of Code
The simple hack is to add an empty nav bar before your own nav bar content with the class me-auto, as shown below.
{/*This is the hack */}
<Nav className="me-auto">
</Nav>
{/*Any nav bar created beneath this now aligns to the right.*/}
You can ask questions if you don't quite understand.
Give css property float : left to the division or to whatever you want to align right :)
You can target the dropdown menu with a dropdown-menu-right to align the Contribute nav item right. bootstrap dropdown alignment docs
add a
div className='Navbar'
before <navbar.Toggle> and add CSS item
.Navbar{ justify-content: flex-end;}
Related
I'm creating with reactjs Navbar which should include an dropdown menu component. I took the example from react bootstrap.
import React from 'react';
import {NavDropdown} from 'react-bootstrap'
export default function Dropdown() {
return (
<>
<div className="dropdown-style">
<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>
</div>
</>
)
}
But when I run this code the dropdown menu does not open in the front.
But the dev-mode shows me that it's actually opening.
The dropdown menu is only showing when I'm including this css-style
.dropdown-style{
position: absolute;
But when I shrink the window then this component tears up the whole navbar when I merge it to the burger menu
I tried
{ .z-index: 999 }
But this didn't work.
Here is the navigation component
export default class Navbar extends Component {
state = {
isOpen: false
};
handleToggle = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<nav className="navbar">
<div className="nac-center">
<div className="nav-header">
<Link to="/">
<img src={logo} alt="foo" id="foo" />
</Link>
<button
type="button"
className="nav-btn"
onClick={this.handleToggle}
>
<FaAlignRight className="nav-icon" />
</button>
</div>
<div className="ul-width nav-font">
<ul
className={this.state.isOpen ? "nav-links show-nav" : "nav-links nav-terms"}
>
<li className="navbar-top">
<Link to="/support"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
Support
</Link>
</li>
<li className="navbar-top">
<Link to="/aboutus"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
<nobr>About Us</nobr>
</Link>
</li>
<li className="navbar-top">
<Link to="/foo"
onClick={(this.state.isOpen) ? this.handleToggle : null}>
foo
</Link>
</li>
<li className="navbar-top">
<Dropdown/>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
I've found out for myself now.
If one of you have the same problem, just overwrite the css-class with .dropdown-menu { position:relative !important }
it seems that dropdown-menu is written by react itself and you just have to overwrite it.
I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
i am fairly new to react and i am building an app that has 2 languages. you can switch between the languages from the navbar using Redux to handle the state. i have a json file where i stored the text for both languages and used onClick to switch between them. it works great on every component and every page.
however my problem is on some components where i am using map() and find() functions to get data from a different json file so i feel like i am forced to find another solution to switch languagse on these components and the simplest solution i could think of is to hide/show a class between two h1 for example one for english and one for arabic.
how can i make an onClick function on the navbar button that will change the language and also show/hide a class on other components not a child component in order to show one of the two languages?
this is the Navbar.js
import React, { Component } from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { NavLink } from 'react-router-dom'
import './Navbar.css';
import '../../../data/content.json'
const Provider = require('react-redux').Provider;
const createStore = require('redux').createStore;
const content = require('../../../reducer');
class Navbar extends Component {
showSettings (event) {
event.preventDefault();
}
render() {
const data = this.props.data;
let switchLanguage = this.props.switchLanguage;
return (
<div>
<ul className="right hide-on-med-and-down language">
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'en')} className="language-a">Eng</a></li>
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'ar')} className="language-a">عربي</a></li>
<li className="right">
<p>CALL US: +905061162526</p>
</li>
</ul>
<i onClick={ this.showSettings } className="material-icons sidenav-trigger right">menu</i>
<Menu >
<img className="sidenav-logo" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522222933/other/home-page-logo.png" alt="cayan group logo"/>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/contact">{data.contact}</NavLink>
</li>
</Menu>
<div className="navbar-fixed">
<nav className="normal-nav">
<div className="nav-wrapper">
<img className="responsive-img" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522221061/other/logo-nav.png" alt="cayan group logo"/>
<ul className="nav-links center hide-on-med-and-down">
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/contact">{data.contact}</NavLink>
</li>
</ul>
</div>
</nav>
</div>
</div>
);
}
}
export default Navbar;
this is the where i want to hide/show a class. on some tags in want to show and hide one of them based on the language selected
import React, { Component } from 'react';
import Slider from 'react-slick';
import PRODUCTS from '../../Data/CarouselData.js';
import './ProjectsCarousel.css';
class ProjectsCarousel extends Component {
render() {
const data = this.props.data;
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: false,
autoplaySpeed: 5000,
responsive:[
{ breakpoint: 400, settings: { slidesToShow: 1 } },
{ breakpoint: 1024, settings: { slidesToShow: 2 } }
]
};
return (
<div className="projetcsCarousel ">
<div className="containermy">
<div className="row">
<div className="container">
<h1 className="body-h1">PROJECTS</h1>
</div>
<div className="carousel">
<div className="left-btn col s1">
<p>PREV</p>
</div>
<Slider className="inner col s10" {...settings}>
{PRODUCTS.map((product)=>{
return (
<a key={product.id} href={'/products/'+product.id}>
<div className='wrapper'>
<div className={'carouselImages cayan-'+product.id}>
<h6>{'CAYAN'+product.id}</h6>
</div>
<div className="description">
<h6>Description</h6>
<h5>{product.priceMin + ' - ' + product.priceMax}</h5>
<p>{product.description}</p>
<p>{product.descriptionAr}</p>
</div>
<div className="project-info ">
<div className="col s6 project-info-icons left">
<i className="ion-ios-location-outline "></i>
<p>{product.location}</p>
<p>{product.locationAr}</p>
<br/>
<i className="ion-ios-home-outline"></i>
<p>{product.types}</p>
<br/>
<i className="ion-ios-photos-outline"></i>
<p>{product.area}</p>
<br/>
</div>
<div className="col s6 project-info-icons right">
<i className="ion-ios-pricetag-outline "></i>
<p>{product.installment} months installments</p>
<br/>
<i className="ion-ios-gear-outline"></i>
<p>{product.status}</p>
<br/>
<i className="ion-ios-cart-outline"></i>
<p>{product.deliveryDate}</p>
<br/>
</div>
<button className="more-details">MORE DETAILS</button>
</div>
</div>
</a>
)
})}
</Slider>
<div className="right-btn col s1">
<p>NEXT</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProjectsCarousel;
This might resolve issue with multiple element class toggling.try this out:
https://jsfiddle.net/menomanabdulla/todu7m6g/11/
class ToggoleApp extends React.Component {
constructor(props) {
super(props)
this.state = {
}
this.toggleClass=this.toggleClass.bind(this);
}
toggleClass(e){
let classes = 'my-class';
let els = document.getElementsByClassName('my-class active');
if(els){
while (els[0]) {
els[0].classList.remove('active')
}
}
e.target.className = classes.replace('my-class','my-class active');
}
render() {
return (
<div>
<h2>Toggle Example</h2>
<ul>
<li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
One
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Two
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Three
</li>
</ul>
</div>
)
}
}
ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.my-class{
color: #FF3355;
}
.my-class.active{
color: #33FF46;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
From what I understand from after reading the question is you have to toggle between the elements on click by changing the class.
The solution I propose is change a single variable value onClick and use the variable to show and hide for example:
let isEnglish = true;
<h1 style={ display: isEnglish ? block : hidden }>{'Welcome'}</h1>
<h1 style={ display: isEnglish ? none : block }>{'Welcome in Arabic'}</h1>
I want to add Navigation Bar to my website using Bootstrap in ReactJS. But all NavItems are on separate lines. How to put them on one line. I followed the guide in Bootstrap docs.
Output image
import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return(
<div className="Header">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
</Navbar.Header>
<Navbar.Collapse>
<Nav pullLeft>
<NavItem eventKey={1} href="#">
Link1
</NavItem>
<NavItem eventKey={2} href="#">
Link2
</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Link3
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default Header;
You need to add de css to your index.html, from your package or from the CDN.
check this Link for more info
[Working Demo is here] codesendbox
I have used react-router v4 for routing in my application. I have used routing to show various form like for showing apartment form, experience form, login, register etc.
Problem
When i click on apartment image, react router routes to apartment form. The route becomes /apartment. If i again then click on register button, the route do not get updated. I have to double click on register button to update the route to /register.
Here is my code
class App extends Component {
constructor(props, context) {
super(props, context);
console.log('context', context);
this.state = { show: false };
}
showModal(e) {
e.preventDefault();
this.setState({ show: true });
}
hideModal() {
this.setState({ show: false });
}
render() {
return (
<div className="container-fluid">
<Nav
showModal={(e) => this.showModal(e)}
hideModal={() => this.hideModal()}
show={this.state.show}
onHide={() => this.hideModal()}
/>
</div>
);
}
}
App.contextTypes = {
router: React.PropTypes.object
};
const Nav = (props) => (
<Router>
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="">
<img
alt="Brand"
className="img-responsive"
src={logo}
role="presentation"
/>
</a>
</div>
<div className="collapse navbar-collapse" id="collapse-1">
<ul className="nav navbar-nav navbar-right nav-social-icon">
<li className="dropdown">
<a
href=""
className="dropdown-toggle"
data-toggle="dropdown"
>
ES
<span className="caret" />
</a>
<ul className="dropdown-menu" style={{ color: '#000', fontWeight: 'bold' }}>
<li onClick={() => props.selectedLocale('en')}>
en
</li>
<li onClick={() => props.selectedLocale('es')}>
es
</li>
</ul>
</li>
<li className="btn-group regLog">
<button
className="btn btn-default"
onClick={props.showModal}
>
<Link to={{ pathname: '/signup' }}>
{props.intl.formatMessage({ id: 'nav.registration.text' }) }
</Link>
</button>
<button
onClick={props.showModal}
className="btn btn-default"
>
<Link to={{ pathname: '/login' }}>
{props.intl.formatMessage({ id: 'nav.login.text' }) }
</Link>
</button>
{props.show ?
<ModalForm
show={props.show}
onHide={props.onHide}
/> : <span />
}
</li>
</ul>
</div>
</div>
</nav>
</div>
</Router>
);
class ModalForm extends Component {
render() {
const { show, onHide, intl } = this.props;
return (
<Router>
<Modal
{...this.props}
show={show}
onHide={onHide}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Link to='/login' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.login.text' })}
</Modal.Title>
</Link>
<Link to='/signup' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.registration.text' })}
</Modal.Title>
</Link>
</Modal.Header>
<Modal.Body>
<Match pattern='/login' component={Login} />
<Match pattern='/signup' component={Signup} />
</Modal.Body>
</Modal>
</Router>
);
}
}
I think its because of using onClick event and routing. How can i solve it?
UPDATE
I tried to use router context but i am getting undefined. App is a parent component and Nav is a child component. Nav component uses router while onClick functions are handled in App component where this.context.router has to be handled.
Thanks
Put the redirect on onClick function using router context ...
https://github.com/ReactTraining/react-router/blob/master/docs/API.md#routercontext
You use contextTypes from react to access router from react-router and the n use push to change url
I am also using RRv4, to handle button links as you have then I wrap the button in the link. The put the overall click handler on the link. This should call prior to the transition and if you need to prevent transition you can simply call e.preventDefault
This will maintain the declarative nature of RRv4 and prevent the need to use the experimental context feature in react.