Navbar to get horizontal layout

Question

I have the following code for a navbar in a React app. The navbar content looks fine when the browser window is wide, but once I drop past the navbar-expand-lg cutoff, the icons align vertically one above the other. How do I prevent that? (see screenshot below code)

import React, {Component} from 'react';
import {
  Badge,
  Nav,
  Navbar,
  NavbarBrand,
  NavbarToggler,
  NavItem,
  NavLink,
} from 'reactstrap';
import FontAwesome from '@fortawesome/react-fontawesome';

class Header extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      
        
        Logo
        
          
            
              
              5
            
          
          
            
              
              5
            
          
          
            
              
              5
            
          
        
        
      
    );
  }
}

export default Header;

WebDevBooster · Accepted Answer

To achieve what you want, you need to use the flex-row class to turn what normally would be a flex column into a flex row.

Here is the complete working code for your navbar including both hamburger menus (I have hidden the right menu items on lg screens with the d-lg-none class):





    
    Navbar

    
        
            
                
                    
                    5
                
            
            
                
                    
                    6
                
            
            
                
                    
                    8
                
            
        
    

    

    
        
            
                Left Home (current)
            
            
                Left Link 1
            
            
                Left Link 2
            
        
    

    
        
            
                Right Home (current)
            
            
                Right Link 1
            
            
                Right Link 2

The padding on the right for the icons is adjusted the padding-right classes pr-3 pr-lg-0 i.e. zero or default padding on lg screens and up and 3 units right padding on smaller screens.

Also note how the order-lg-last class switches things around on lg screens and above.

Navbar to get horizontal layout

Answers (2)

Related Questions