How to make navigation menu responsive as two rows on mobile and tablet devices?

Question

I have navigation menu that I tried to make it responsive in two rows on mobile phone and tablet break point.

My html code to do this is like below but it does not seem to work for me.

.navbar-default .navbar-nav>li {
   display: inline-block;
 }
 
 @media all and (max-width: 841px) {
   #ID {
     clear:both;
     display: block;
     margin-left: 25px;
   }
   li#liMore ul.dropdown-menu {
     position: absolute !important;
     background: #f8f8f8 !important;
   }
 }









  
    
       Add New Page
    
    
       Update Page
    
    
       Cancel
    
    
      
        
          
        
      
    
    
      
        
        
        
           Copy
           Paste
           Delete
          
           List Page
           List draft Page
           List saved Page
          
           Export

I would like to keep New Edit Cancel as one row while text box and drop down as another row on mobile and tablet break point. Although I set text box to display block and clear both to force it break into new line, it does not break into new line as another row for me.

What is css style trick that I can do to archive above result as I want? Thanks.

Robert · Accepted Answer

I cannot say I would recommend this approach as it's rather antithetical to the scope of the Navbar component (which is to responsively collapse links, not expand vertically). That being said, if we restructure your code to comply with Bootstrap 3.x formatting and apply a bit more of the Bootstrap Grid into your Navbar you can get something functional.







  
    
      
        
         Add New Page
         Update Page
         Cancel
        
      
    
      
        
          
              
              
            
          
      
          
            
              
              
      
              
               Copy
               Paste
               Delete
              
               List Page
               List draft Page
               List saved Page
              
               Export

Where this approach is, perhaps, a little more friendly is that it relies exclusively on Bootstraps native responsive framework; you don't need to create your own media query rules at all.

Where you're going to run into some difficulty is the btn-group. When you use

How to make navigation menu responsive as two rows on mobile and tablet devices?

Answers (1)

Related Questions