-1
I’m trying to align the navbar to the right, however, unsuccessfully, is like this currently:
index js.
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, Navbar } from 'react-bootstrap';
import Nav_Link from '../../components/index';
import LogoImg from '../../assets/logo.png';
import RetanguloImg from '../../assets/retangulo.png';
import PredioImg from '../../assets/predio.png';
import {
Nav_Link_Line,
Button,
Title,
Text,
Text2,
Button2,
Table,
} from './styles';
export default class Main extends Component {
render() {
return (
<div>
<Navbar expand="lg" variant="dark">
<Navbar.Brand href="#home">
<img class="logo" src={LogoImg}></img>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav_Link href="">QUESTINÁRIO</Nav_Link>
<Nav_Link href="">DÚVIDAS</Nav_Link>
<Nav_Link href="">FEEDBACK</Nav_Link>
<Nav_Link href="">CONTATO</Nav_Link>
<Nav_Link href="">SOBRE</Nav_Link>
<Nav_Link_Line href="">
<div class="line"></div>
</Nav_Link_Line>
<Nav_Link href="">LOGIN</Nav_Link>
<Button href="">CADASTRE-SE</Button>
</Nav>
</Navbar.Collapse>
</Navbar>
Styles.js
export const Nav_Link = styled.a`
margin-left: 31px;
margin-top: 15px;
color: white;
display: flex !important;
justify-content: end !important;
&:link {
text-decoration: none;
}
&:hover {
color: #748aaa;
}
`;
export const Nav_Link_Line = styled.text`
margin-left: 31px;
margin-top: 10px;
color: white;
`;
global.js
.navbar {
background-color: #3D5975;
color: #ffff;
font-weight: bold;
height: 64px;
width: 100%;
}