I actually don't know whats wrong here is it some bootstrap error in the code do i have the wrong version or something?
I think align-items-center should do it i don't know why it doesn't. And please don't tell me to make the elements display:inline or inline-block, it does not work.
Here is the code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import styled from "styled-components";
import { ButtonContainer } from "./Button";
export class Navbar extends Component {
render() {
return (
<NavWrapper className="navbar navbar-dark ">
<Link to="/">
<img src={logo} alt="store" className="navbar-brand " />
</Link>
<ul className="navbar-nav align-items-center">
<li className="nav-item ">
<Link to="/" className="nav-link">
products
</Link>
</li>
</ul>
<Link to="/cart" className="ml-auto">
<ButtonContainer>
<span className="mr-2">
<i className="fas fa-cart-plus" />
</span>
my cart
</ButtonContainer>
</Link>
</NavWrapper>
);
}
}
const NavWrapper = styled.nav`
background: var(--mainBlue);
.nav-link {
color: var(--mainWhite);
fontsize: 1.3rem;
text-transform: capitalize;
}
`;
export default Navbar;
I am sorry for taking your time, i just reinstalled bootstrap and it works...
Related
import React from "react";
import "./sidebar.css";
import { Link, NavLink } from "react-router-dom";
import { MdDashboard } from "react-icons/md";
import {
FaUserAlt,
FaListAlt,
} from "react-icons/fa";
const Sidebar = () => {
return (
<section className="component-sidebar">
<div className="component-sidebar-nav">
<ul>
<li>
<Link to="/">
<div className="component-sidebar-nav-icon">
<MdDashboard />
</div>
<div>Dashboard</div>
</Link>
</li>
<li>
<Link to="/my-profile">
<div className="component-sidebar-nav-icon">
<FaUserAlt />
</div>
<div>Profile</div>
</Link>
</li>
<li>
<Link to="/my-courses">
<div className="component-sidebar-nav-icon">
<FaListAlt />
</div>
<div>My Courses</div>
</Link>
</li>
</ul>
</div>
</section>
);
}
export default Sidebar;
I want to make active side bar, but didn't find any solution. I don't want to use NavLink.I want to make it custom in React js.
If anyone help me. I really appreciate it. Looking for a solution.
Thanks in Advance.
I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.
this is my code so far:
import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";
const Wrapper = styled.div`
background-color: #9ac2ba;
.Nav-Brand {
display: flex;
}
.navbar {
background-color: #9ac2ba;
}
`;
const LinkWrapper = styled.div`
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #333;
.nav-link {
color: #333;
}
.nav-link:hover {
color: #000;
}
`;
const Navigation = () => {
return (
<Wrapper>
<Navbar
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
<Container>
<Navbar.Brand href="/" className="Nav-Brand">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
/>
<h1 className="visually-hidden">
SPF Paint & Decorating, Birmingham
</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
/>
<Navbar.Offcanvas id="offcanvasNavbar" placement="start">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
<span className="visually-hidden">SPF Nav Menu</span>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
className="offcanvas-brand"
/>
<LinkWrapper>
<Link to="/" className="nav-link">
Home
</Link>
<Link to="/#services" className="nav-link">
Services
</Link>
<Link to="/#faq" className="nav-link">
FAQ
</Link>
<Link to="/#contact" className="nav-link">
Contact
</Link>
</LinkWrapper>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</Wrapper>
);
};
export default Navigation;
this is the build of the site: https://pland.netlify.app/
All your links are to content on the same page, so using Link isn't necessary. Instead, replace these with regular anchor tags <a href=''>Link</a>
Secondly, the default behaviour of Offcanvas is that when the overlay is closed the focus is returned to where it was when the overlay was opened. That's why the page isn't scrolling to the correct position when the overlay is closed. To change this, you can pass in restoreFocus={false} prop to Offcanvas. See Offcanvas API docs.
Thirdly, to get the menu to close when a link is clicked, you should track whether the menu is open in state and add a toggle function to the onClick prop of each link, as well as the Navbar.Toggle.
const Navigation = () => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const handleClose = () => setMenuOpen(false)
return(
/** Omit code */
<Navbar.Toggle
aria-controls='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
/** Add onClick toggle here */
onClick={toggleMenu}
/>
<Navbar.Offcanvas
id='offcanvasNavbar'
placement='start'
/** Add these props */
restoreFocus={false}
show={menuOpen}
onHide={handleClose}
>
/** omit code */
<Nav className='justify-content-end flex-grow-1 pe-3'>
<a href='#services' className='nav-link' onClick={toggleMenu}>
Services
</a>
<a href='#faq' className='nav-link' onClick={toggleMenu}>
FAQ
</a>
{/** more links */}
</Nav>
/** omit code */
)
}
There is an option in the docs to automatically close: collapseOnSelect
https://react-bootstrap.netlify.app/components/navbar/#navbar-props
<Navbar
collapseOnSelect
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
I'm setting scrolls with react-scroll but it isn't working for some reason. I checked the documentation but I can't see why this isn't working.
Here is my component where I'm setting the links:
import React from 'react';
import classes from './Footer.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { Link } from 'react-scroll';
import {
faFacebook,
faTwitter,
faInstagram,
} from '#fortawesome/free-brands-svg-icons';
const footer = (props) => (
<footer className={classes.Footer}>
<ul className={classes.FooterLinks}>
<li>
<Link
to="navigation-bar"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
home
</Link>
</li>
<li>
<Link
to="about"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
about
</Link>
</li>
<li>
<Link
to="products"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
products
</Link>
</li>
</ul>
<ul className={classes.FooterIcons}>
<li>
<a
href="https://www.facebook.com/"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faFacebook} />
</a>
</li>
<li>
<a
href="https://www.twitter.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
<li>
<a
href="https://instagram.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faInstagram} />
</a>
</li>
</ul>
<p className={classes.Copyright}>
copyright © carlos suarez. all rights reserved
</p>
</footer>
);
Here is an example of the components and how Im setting Id:
import React from 'react';
import classes from './NavBar.css';
import NavbarMenuBurger from './NavbarMenuBurger/NavbarMenuBurger';
import NavbarCartIcon from './NavbarCartIcon/NavbarCartIcon';
const navBar = (props) => {
return (
<nav className={classes.Navbar} id="navigation-bar">
<NavbarMenuBurger clicked={props.menuDrawerShowToTrue} />
<h1 className={classes.HeaderTitle}>RAINBOW SODAS UK</h1>
<NavbarCartIcon clicked={props.drawerShowToTrue} />
</nav>
);
};
export default navBar;
All the other components are set similarly.
Unfortunately, something isn't right and I can't figure out what this could be. I checked the DOM after the page is rendered and notice that the tags are not showing the href property. Is this normal when using scroll-react?
It turns out I had a setting in my CSS that didn't allow scroll.
body,
html {
font-family: 'Roboto', sans-serif;
background: #fff;
color: rgb(41, 41, 41);
line-height: 1.5;
font-size: 0.875rem;
/* width: 100%;
height: 100%; */
overflow-x: hidden;
scroll-behavior: smooth;
}
I want to hide the location bar, search bar, and sell button except for the logo from the PostAd.js page. The only logo should appear on the PostAd.js page. I have posted my code for reference. I just want to show the logo on my PostAd.js page. I'm new and learning React.js
See image for reference:
Header.js
import React, { Component } from 'react';
import { Link } from "react-router-dom";
function Logo() {
return (
<a className="navbar-brand logo" href="#">
<img src={require("../ui/logo.png")} />
</a>
);
}
function SearchAndLocation(props) {
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav flex-2 pr-3">
<li className="input-group input-group-lg location mr-4 flex-1">
<div className="input-group-btn">
<button className="fas fa-search search-ico"></button>
</div>
<input type="text" className="form-control" placeholder="Pakistan" />
<div className="input-group-btn">
<button className="fas fa-chevron-down ico"></button>
</div>
</li>
<li className="input-group input-group-lg search flex-2">
<input type="text" className="form-control" placeholder="Find Mobile, Car ,laptop" />
<div className="input-group-btn">
<button className="fas fa-search ico"></button>
</div>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<h6 className="mr-sm-2 login" >Login</h6>
<button className="my-2 my-sm-0 fas fa-plus sell"> <Link to={"/postad"}>SELL</Link></button>
</form>
</div>
);
}
function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
<SearchAndLocation />
</nav>
);
}
export {
Header,
Logo,
SearchAndLocation
};
PostAd.js
import React, { Component } from 'react';
import { Header } from "../components/Header";
function PostAd() {
return (
<Header></Header>
);
}
export default PostAd;
router.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import PostAd from "../components/PostAd";
class AppRouter extends Component {
render() {
return (
<div>
<Router>
<Route exact path='/postad' component={PostAd} />
</Router>
</div>
);
}
}
export default AppRouter;
You can use conditional rendering by creating variable and set it to false/true so you can hide/display component with &&
function Header() {
const showSearchBar = false
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
{showSearchBar &&
<SearchAndLocation />
}
</nav>
);
}
The basic of react is composing components like lego blocks. If you don't want it on the screen, you can delete the component.
What you need to do:
Delete the SearchAndLocation component from the Header component.
Do this:
function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
<SearchAndLocation /> <--- delete this line
</nav>
);
}
If you want to hide it only in PostAd, then you have 2 solutions:
A. Create new Header specific to be used in PostAd.
B. Create the Header so that it can read the route, and if it is currently in "/postad", you hide the "SearchAndLocation" component.
I think solution A is simpler, let's go with it. What you should do:
Create new header component, for example name it NewHeader. The content should be the same like Header but without "SearchAndLocation".
Export the NewHeader. Use the NewHeader in PostAd component.
Done!
For solution B, what you should do:
In the Header component, use useLocation hooks provided by 'react-router-dom' (I'm assuming you are using it)
Read the path provided by the useLocation.
Create an if-else render logic. If path===/postad, don't render the "SearchAndLocation" component. Else, render it.
Done!
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.