Topic: How to left-align SideNavLinks inside SideNavNav

okia pro asked 4 years ago


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>


                
                  

Jakub Mandra staff answered 4 years ago


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>


Please insert min. 20 characters.

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