Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
How do I align my React hamburger navbar in a column using NavLink tags
   ```import React from 'react'
    /*import {
      NavLink,
      NavMenu,
      NavBtn,
      NavBtnLink
    } from './NavbarElements';*/
    import { NavLink as Link } from 'react-router-dom';
    import styled from 'styled-components'```

I added this NavbarContainer because I thought it would help but I still cannot get the column view I want in the hamburger side navbar when the navbar drops down and slides to the right const NavbarContainer = () => { const navLinkStyle = { I tried to do flex-flow inline css here flexFlow: 'column nowrap' }; return ( <div> <Nav style={navLinkStyle}> The NavLink and NavMenu are what I think are messing me up. I did two different tutorials to create this and that is what is giving me problems ``` Margaret C Rokita CPA MST

              <NavLink to='/about' activeStyle>
                About
              </NavLink>
              <NavLink to='/services' activeStyle>
                Services
              </NavLink>
              <NavLink to='/contact-us' activeStyle>
                Contact Us
              </NavLink>
              <NavLink to='/sign-up' activeStyle>
                Sign Up
              </NavLink>
            </NavMenu>
            <NavBtn>
              <NavBtnLink to='/signin'>Sign In</NavBtnLink>
            </NavBtn>
            </Nav>
            </div>
        )
    }
    
    export default NavbarContainer
    
    export const Nav = styled.nav`
      
    background: red;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem calc((100vw - 1000px) / 2);
    z-index: 10;
    color: #3451d2;
    @media (max-width: 768px) {
     /*position: absolute;
     top: 50%; left: 50%;
     transform: translate(-50%,-50%);
     width: 200px;
     height: 200px;*/ ```
    Here I also tried to do flex-flow: column
       ```flex-flow: column nowrap;
       top: 0;
       right: 0;
       height: 100vh;
       width: 300px;
       padding-top: 0.5rem;
       padding-bottom: 32.5rem;
       width: 10px
       
       padding-top: 0rem;
       top: 00;
       right: 0;
       transform: translate(-100%, 75%);
       font-size: 0.88em;
       cursor: pointer;
        
        border-radius: 10px;
        transform-origin: 1px;
        transition: all 0.3s linear;
        position: fixed;
        height: 100vh;
        width: 10px
        display: block; 
        padding-top: 3.5rem;
        top: 0;
        right: 0;
        transform: translate(-100%, 75%);
        font-size: 1.15em;
        cursor: pointer;
       background-color: ${({ open }) => open ? 'teal' : 'green'};
       border-radius: 10px;
       transform-origin: 1px;
       transition: all 0.3s linear;
    

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda