Topic: How to left-align SideNavLinks inside SideNavNav
Hello!
May I ask you to help me with the following question?
I have the following snippet (below) and everything seems to work fine except that 'SideNavLink' elements appear to be center-aligned (along vertical axis) inside 'SideNavNav' area.
Question 1: How to make them left-aligned (inside of SideNavNav area)?
Question 2: What if I want them to be right-aligned?
Many thanks!
<SideNavNav> <SideNavLink to="/" exact> <Fa icon=" fa-1" className="d-inline-inline"/> Item 1 </SideNavLink> <SideNavLink to="/route2"> <Fa icon=" fa-2" className="d-inline-inline"/> Yet another item 2 </SideNavLink> <SideNavLink to="/route3"> <Fa icon=" fa-3" className="d-inline-inline"/> This is going to be item 3 </SideNavLink> <SideNavLink to="/route4"> <Fa icon=" fa-4" className="d-inline-inline"/> I4 </SideNavLink> <SideNavLink to="/route5"> <Fa icon=" fa-5" className="d-inline-inline"/> Mambo number 5 </SideNavLink> </SideNavNav>
Add comment
Hello,
SideNavLink fulfills the width of the SideNavNav.
Text is aligned by browser defaults, when you delete those <Fa> it will stick to the left edge.
You can play with SideNavLink inner text alignement and padding:
<SideNavLink to="/" exact className="pl-0 text-right pr-2"> <Fa icon=" fa-1" className="d-inline-inline"/> Item 1 </SideNavLink> <SideNavLink to="/route2" className="pl-0 text-center"> <Fa icon=" fa-2" className="d-inline-inline"/> Yet another item 2 </SideNavLink> <SideNavLink to="/route3" className="pl-0 "> <Fa icon=" fa-3" className="d-inline-inline"/> This is going to be item 3 </SideNavLink> <SideNavLink to="/route4"> <Fa icon=" fa-4" className="d-inline-inline"/> I4 </SideNavLink> <SideNavLink to="/route5" className="pl-0"> <Fa icon=" fa-5" className="d-inline-inline"/> Mambo number 5 </SideNavLink>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.0
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No
Tags
Related topics