Home How to make my navbar fit the max width value while not having enough content?

Questions

How to make my navbar fit the max width value while not having enough content?

February 7, 2022

So I have a navbar that has like 4 links and I need it to be a specific width, and i want it to be responsive so I used max-width: 65em, however this results in it not being 65em unless theres alot of content inside which isn’t there cuz of the nature of a navbar.

How do I make my nav bar content have a width of 65em while being responsive when i decrease screen size? Do I have to mess with media queries and breakpoints for is there a solution?

Navbar code:

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

>Solution :

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  width:100% ;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

Try giving width to nav in percentage .
I have given 100% , you can change it to your convenience.
Try running this code .
I hope this solves your issue .