I would like to center the brand logo in my page and it is currently to the side:
Here is my code:
export default function NavBar() {
return (
<Navbar bg='light' fixed='top' className='navbar py-1 '>
<Container>
<HiOutlineMenuAlt4 />
<Navbar.Brand className="justify-content-center">
<img src={publicgoodslogo} width="120" height="65" ></img>
</Navbar.Brand>
<Navbar.Collapse className="justify-content-end">
<Nav>
<Nav.Link><GoSearch /></Nav.Link>
</Nav>
<Navbar.Text>
Cart:
</Navbar.Text>
</Navbar.Collapse>
<Nav>
0
</Nav>
</Container>
</Navbar>
)
According to the docs I should just be able to use justify-content-center but that doesn't work. Is it because I need to wrap the menu icon in something?
Related
I am starting to use React/Next.js and I have got the error:
TypeError: Cannot read properties of undefined (reading 'Item')
When trying to execute the following code in a Next.js application.
The error is due to the header code that is in components->Menu.js file.
I added the menu code after creating the application with npx create-next-app and installing reactstrap
import MyApp from 'next';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
const Menu = () => {
return (
<div>
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
<NavDropdown title="Social" id="basic-nav-dropdown">
<NavDropdown.Item href="https://protonmail.com/" title="Proton" target="_blank">Proton</NavDropdown.Item>
<NavDropdown.Item href="https://www.deepl.com/translator" title="Deepl" target="_blank">Deepl</NavDropdown.Item>
<NavDropdown.Item href="http://duckduckgo.com/" title="DuckDuckGo" target="_blank">DuckDuckGo</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Menu
If I take the NavDropdown out, I get the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
(The code without NavDropdown is bellow)
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
I am calling the Menu component in the code bellow:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'reactstrap';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
import Menu from '../components/Menu'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Menu></Menu>
<div className={styles.first}></div>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
I got the Menu code from this code: https://github.com/webdeveloperbrasil/next-aula-002
**If I remove the Menu from the code, it works fine.
I am using React Bootstrap and the class position-sticky doesn't work at all.
There is not overflow at all levels.
Any hints?
I found out the Container needs height specified.
Adding height: 100% to the parent and top: 0 to the child fixes the issue.
The reason is that the sticky rule uses the height of the parent to calculate its own position.
Using React Bootstrap the className h-100 can be used to set height: 100%
I hope this helps also others :)
<>
<Navbar
sticky="top"
collapseOnSelect
expand="lg"
bg="primary"
variant="dark"
>
<Container className="">
<Navbar.Brand as={Link} to="/">
<img height={"30px"} src={logo} alt="" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="home#services">Services</Nav.Link>
<Nav.Link href="home#experts">Experts</Nav.Link>
<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>
</Nav>
<Nav>
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<Nav.Link as={Link} to="/login">
Log In
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
I'm using React-Bootstrap and building a Navbar. I want to replace the React-Bootstrap hamburger menu icon with a Font Awesome hamburger icon.
How do I go about changing the built in hamburger menu? Here is my Navbar:
<Navbar expand="lg">
<Navbar.Brand href="#home">
<FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
I am importing the Font Awesome icon I want to use and displaying it like this:
<FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" />;
How can I use this in place of the React-Bootstrap toggler?
This is how it worked for me. Simply insert <span> element with icon in Navbar.Toggle. Like this:
<Navbar expand="lg">
<Navbar.Brand href="#home">
<FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span>
<FontAwesomeIcon
icon="bars" color="#20FC8F" size="2x"
/>
</span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
You can actually omit <span> all whatsoever and it still works.
I am trying to use a NavBar from react bootstrap. However there seems to be a <div class="container"> that adds width. How do I set this width to auto?
I tried the following:
.navbar > .container {
width:auto;
}
But this margin still remains. I also tried to
<Navbar style={{ width: "auto" }}>
<Navbar.Header>
...
But no success. My complete code:
<Row>
<Navbar>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</Row>
you can use only React Bootstrap Fixed top
<Navbar fixed="top" />
It will auto create the CSS below:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
You can see the this and another positions in documentation here
In your css, try the following:
.navbar > .container {
width:auto!important;
}
Just add "fluid" next to Navbar on your code
<Row>
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
If you are using the grid system you can set the Container to fluid
<Container fluid>
<NavBar />
<Row>
<div>Personal Digital Assistants</div>
<ProfileCard text="Hello" info='unknown' imageTag={AlexaImg}/>
<ProfileCard text="Sir" info='unknown' imageTag={CortanaImg}/>
<ProfileCard text="Google thing" info='known' imageTag={SiriImg}/>
</Row>
</Container>
All my pages use the entire width.
I would like the pages to conform to a page with the content having large margins automatically and I cant seem to do it.
I am using react and bootstrap.
I have tried using the following but it still uses 100% of the width...
<div class="container">
<div class="row">
<h1>Scheduler goes here!</h1>
</div>
</div>
I also tried adding this wrapper div
<div class="col-sm-12">
EDIT:
This is not working for me at the moment. I tried to add the container as per the answer below however my navbar is appearing correctly but the page is sitting right on the left margin of the screen.
I am using react-bootstrap.
my menu, which is displaying correctly is as follows
<Navbar>
<Navbar.Header>
<Navbar.Brand>
Jobs Ledger
</Navbar.Brand>
</Navbar.Header>
<Nav pullLeft>
<LinkContainer to="/">
<NavItem eventKey={1}>Schedule</NavItem>
</LinkContainer>
<NavDropdown eventKey={2} title="Clients" id="basic-nav-dropdown">
<LinkContainer to="/fetchdata">
<MenuItem eventKey={2.1}>Fetch Data</MenuItem>
</LinkContainer>
</NavDropdown>
<NavDropdown eventKey={6} title="Original" id="basic-nav-dropdown">
<LinkContainer to="/counter">
<MenuItem eventKey={6.1}>Counter</MenuItem>
</LinkContainer>
<LinkContainer to="/fetchdata">
<MenuItem eventKey={6.2}>Fetch Data</MenuItem>
</LinkContainer>
</NavDropdown>
</Nav>
<Nav pullRight>
<LinkContainer to="/">
<NavItem eventKey={1}>Home</NavItem>
</LinkContainer>
<LinkContainer to="/counter">
<NavItem eventKey={2}>Counter</NavItem>
</LinkContainer>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<LinkContainer to="/fetchdata">
<MenuItem eventKey={3.1}>Fetch Data</MenuItem>
</LinkContainer>
</NavDropdown>
</Nav>
</Navbar>
my layout page is as follows:
<div class='container'>
<div>
<NavMenu />
</div>
<div>
{this.props.body}
</div>
</div>
and my page-body (which is up hard against the left side of the screen) is
return (
<div class="container">
<h1>Scheduler goes here!</h1>
</div>
the body should be in line with the navbar...
Set the container to a certain width, for example 50%. Then you can offset this through CSS and the rest of the child elements in the container will have 100% of the 50%.
set the container a fixed width and put a margin in container
.container{
width: 500px;
margin: 0 auto;
}