I have a website mostly done with React-Bootstrap and I am kind of a beginner in this field. I want my background to be black in all the pages so I set it with background-color:black !important; in every page. I did a Navigation Bar with React-Bootstrap and now when I move through the pages, there is a white glitch before turning it to black.
I tried to put the style in html, to load it faster, changed the color in body with !important, even overridden the bootstrap variable for background-color but neither of these worked.
I know that the glitch between the pages would dissappear if I would use just React NavBar not Bootstrap one and I've tried it, but there is also a glitch when you reload the page and it bothers me.
Has anyone any idea what could cause it?
My navigation bar is pretty simple:
<Navbar className="navbar" expand="sm">
<Navbar.Brand className="logo" href="#home" >React-Bootstrap</Navbar.Brand>
<Navbar.Toggle className="toggle" aria-controls="responsive-navbar-nav" />
<Navbar.Collapse className="navbar-links" id="responsive-navbar-nav" >
<Nav className="ms-auto">
<Nav.Link className="navlink" href="home">Home</Nav.Link>
<Nav.Link className="navlink" href="documents">Documents</Nav.Link>
<Nav.Link className="navlink" href="about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar >
Later edit :
I tried in Google Chrome and it shows only sometimes ( 2-3 reloads), but still appears.
Related
Hi All, for the life of me, I've been stuck in this dilemma for days. I'm building a new website for my father in law's restaurant & built it in React so I can make the Menu dynamic & bootstrap.
I got the Nav bar JUST how I wanted it except for this last step. I want to add text on the top left which ends up pushing the navbar to the right. I did try to get it hovered in the top left but then it covers my ability to click on "Menu" or "Events". On top of that, I have been unsuccessful in getting text in the top right where I want to put phone numbers. It's like the image blocks the text from stretching to the right, any suggestions?? I couldn't find anything similar to this on google.
class Navigation extends React.Component {
render() {
return (
<Navbar variant="light" expand="md" >
<Container>
<Navbar.Brand href="/" className="d-md-none">
<img src={logo} height="55px" alt="Mikes Pizzeria" />
</Navbar.Brand>
<div id="navContent">Italian Quisine at its Best</div>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mx-auto align-items-end nav-fill w-100">
<Nav.Link href="/menu">Menu</Nav.Link>
<Nav.Link href="/events">Events</Nav.Link>
<Nav.Link href="/">Social</Nav.Link>
<a className="d-none d-md-block"href="/"><img src={logo} alt="Mikes Pizzeria" height="100px"/></a>
<Nav.Link href="/">VIP Rewards</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/">Order Online</Nav.Link>
</Nav>
</Navbar.Collapse>
CSS
.navbar{
background-color: rgba(210, 194, 158, 0.7);
margin-bottom: 30px;
}
#navContent{
font-size: 20px;
position: relative;
float:none;
overflow:hidden;
margin:20px;
}
The website I'm working on has an issue where the collapsible menu that's supposed to show up when the screen size is too small is transparent. It still works, but it's not visible, which obviously isn't what I intended. I'm using reactstrap to make the collapsible menu but I haven't discovered a way to make it visible so far in my research.
Can someone please help me solve this issue? The file where this issue happens is here in the render method.
<Navbar expand="sm" className="mb-3 my-navbar">
<Container>
<NavbarBrand tag={RRNavLink} exact to="/"
className="my-navbar-brand">Writer</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
{isAuthenticated ? authLinks : guestLinks}
</Nav>
</Collapse>
</Container>
</Navbar>
Since you are not using a theme for your navbar, the CSS for the toggler button is not appearing. As a fix you can try to add a theme to the navbar, e.g., navbar-light and you will see that the hamburger button appears
<Navbar expand="sm" className="mb-3 my-navbar navbar-light">
Alternatively, you can add the CSS for which ever color of the stroke you prefer. Here is the CSS for the navbar-light hamburger button strokes:
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
I am using react-bootstrap Cards on my project. I have great view with that. I have horizontal search button on it. I would like to use this button for routing.
I set my settings on my app.js class. Actually, I can change route with <Link> but my search button looks bad with it. I would like to use Search button while keeping visual design.
Sorry for my explanation, It's hard to explain without any visual support. if it is not clear please leave comment and I would try to clarify with onether way.
Here is my codes;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
<Button variant="secondary">SEARCH</Button>
</Card>
I can do routing with wit this code;
<Card bg="dark" text="white" style={{ width: "18rem" }}>
<Card.Header>SWITCH</Card.Header>
<Card.Body>
<Card.Title>Dark Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
<Link to={"/route which I defined in app.js"}>
<Button variant="secondary">SEARCH</Button></Link>
</Card>
But this time, search button's size decrease. Are there any way to stretch it? Or should I change usage of <Link> ?
You can use a package called react-router-bootstrap from npm and use it. It's very simple and for your use case find the below snippet.
<Link to={"/route which I defined in app.js"}><Button]>Foo</Button></Link>
becomes
import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to={"/route which I defined in app.js"}>
<Button>Foo</Button>
</LinkContainer>
find more on react-router-bootstrap
You probably will need to do some custom css styling still. You can open up your elements browser by clicking inspect in chrome and find the class of the link, then you can overwrite that class to match your styling needs.
Also try wrapping the link with the button
<Button variant="secondary"><Link>SEARCH</Link></Button>
NOTE: Even though it's not recommended and you should normally avoid it, you might need to use !important in your css when overwriting bootstrap.
you can try,
<Button as={Link} to="/your_destination">Foo</Button>
I'm building a vertical menu bar in Semantic UI React. I have a number of Menu.Item components in my Menu. The first Menu.Item contains an Icon component with no Menu text. The issue I am having is that the Icon is overflowing into the Menu.Item below it. I can't figure out why this is? I have tried adjusting margin, padding, line-height but nothing seems to work. Any ideas? Would be greatly appreciated. Thank you.
Here is my code for the first couple Menu.Items. Adding text to Menu.Item increases the size correctly but I don't want any Menu text with the Icon.
<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
<Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
Home
</Menu.Item>
<Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>
Try This one it will help you
<Menu.Item> link style={{ display: "inline-block" }} ><Icon name='x' size='large'/></Menu.Item>
I am developing a single page in react and when I saw it on mobile version the menu organization was all messed up.
How can I put the menu responsive as I change from a pc version to a mobile version?
Bootstrap is typically used to build responsive, mobile-first projects on the web. You can use bootstrap within a React project by downloading it with an: npm i --save bootstrap. Then downloading Bootstrap's dependencies: popper.js, and JQuery. After everything has been downloaded, within your React components, you could assign the appropriate Bootstrap classes to the semantic elements making up your components by using the className attribute.
However with that being said, perhaps an easier approach would be to utilize React-Bootstrap since it's a "React friendly version of bootstrap". Directly from React-Bootstrap's documentation:
"React bootstrap replaces the Bootstrap javascript. Each component has been built from scratch as true React components, without uneeded dependencies like jQuery. It's built with compatibility in mind, we embrace our bootstrap core and strive to be compatible with the world's largest UI ecosystem."
Here is an example navbar, directly from their documentation, which would stack, as desired, when the device's screen size changes:
<Navbar bg="light" 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="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-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>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>;
Test it out on your end by enlarging and minimizing your browser window to see how the menu stacks and changes with different screen sizes.
Hopefully that helps!
You can use React semantic ui. There are lots of Ui components and all are responsive. Very easy to implement.