1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: How to left-align SideNavLinks inside SideNavNav

okia pro asked 6 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 6 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>



                    
                      

                    
                    
                    

                      
                      
                      
                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
            
            
              
              

                
                

                  

  
  
  
  


                

                
                
                

                  
Write

                  
                     Create snippet
                  
                

                

                
                

                  

                    
                    

                      
                      
                      

                      

                        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

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      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

                  

                  
                  

                    
                      
                        sidenavnav
                      
                    
                      
                        sidenavlink
                      
                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        okia
                      
                    

                    
                    
                    Pro User
                    
                    

                    
                    
                      20Support score
                    
                    

                    
                      5Questions
                    
                    
                      11Answers
                    

                    
                    
                      0Snippets