Recently, I came across a navigation bar code in ReactJS online and decided to style it according to my preferences. Currently, it appears like this:
https://i.sstatic.net/BR8QS.png
However, I am aiming for it to resemble the following design:
https://i.sstatic.net/7smt7.png
The main adjustment I'm striving to make is shifting the "sample" title to the left side.
Initially, I assumed it might be a flex direction issue, so I attempted changing justify-content:center to justify-content:flex-end, yet that alteration didn't yield the desired outcome.
Below is the snippet of my React code:
return (
<>
<Nav scrollNav={scrollNav}>
<NavbarContainer>
<NavLogo to='/' onClick={toggleHome}>sample</NavLogo>
<MobileIcon onClick={toggle}>
<FaBars />
</MobileIcon>
<NavMenu>
<NavItem>
<NavLinks
to='about'
smooth={true}
duration={500}
spy={true}
exact='true'
offset={-80}>About</NavLinks>
</NavItem>
// Other NavItems ...
</NavMenu>
</NavbarContainer>
</Nav>
</>
)
}
export default Navbar
Furthermore, here's the styling portion:
// CSS styling segments
If anyone can provide insights on how to resolve this dilemma, I would greatly appreciate it.