Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

172
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!