Align Navbar Bootstrap-React

Asked

Viewed 227 times

-1

I’m trying to align the navbar to the right, however, unsuccessfully, is like this currently:

inserir a descrição da imagem aqui
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%;
  }

1 answer

0


Use Flex Display on your Nav, then use justify-content: flex-end to align the content at the end of your element. I made a codepen using div and list to show you, but the concept is the same.

https://codepen.io/ianpbh/pen/OJVVbxa

Browser other questions tagged

You are not signed in. Login or sign up in order to post.