How do I make the responsive navigation stack vertically on the small screen or landscape orientation on smartphones (using Bootstrap 4 alpha 2)?

Question

How do I make the responsive navigation stack vertically on the small screen or landscape orientation on smartphones (using Bootstrap 4 alpha 2)?

1k Views Asked by Christy At 14 April 2021 at 01:20

Here is my CSS and HTML for that section:

@media (min-width:544px) {
  .navbar-toggler {
    float: right;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 25px;
    padding: 10px;
    border: none;
  }
  .nav-responsive li {
    display: block;
  }
  .nav-item {
    list-style: none;
  }
  .navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
  
  
  
}
@media (max-width: 991px) and (orientation: landscape)
{
  .navbar-expand-lg .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; /* This will override the flex-direction: column */
}





}

<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#menu">
&#9776;</button>  
    
    

<div class="collapse navbar-expand-lg navbar-toggleable-sm" id="menu">
    

    
<ul class="navbar-nav nav-responsive pull-md-right">

<li class="nav-item"><a href="https://christymlittle.com/" class="nav-link" title="">Home</a></li>
<li class="nav-item"><a href="about" class="nav-link" title="">About</a></li>

<li class="nav-item"><a href="work" class="nav-link" title="">Work</a>

</li>
    
<li class="nav-item"><a href="contact" class="nav-link" title="">Contact</a></li>

</ul>

Update: This site won't let me insert a screenshot and I don't have this on a live site at the moment. The simulator will show the menu as vertical on landscape view on smartphones, but the top link sticks out more to the left than the other links. This continues on the larger screens, despite the override in the large breakpoint.

Original Q&A

There are 1 best solutions below

**readyplayer77** · Answer 1 · 2021-04-14T22:28:31.860000

You might want to replace the navbar of your <ul> element with navbar-nav, and add the navbar-expand-lg class to your <div>.

The navbar-nav class creates the vertical stack, and navbar-expand-lg from the parent element ensures it displays horizontally on a large screen.

See the following snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<style>
    @media (min-width:544px) {
        .navbar-toggler {
            float: right;
            display: inline-block;
            margin-top: 5px;
            margin-bottom: 25px;
            padding: 10px;
            border: none;
        }

        .nav-responsive li {
            display: block;
        }

        .nav-item {
            list-style: none;
        }
    }

    @media screen and (orientation:landscape) {
        .navbar-nav {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column; /* This will override the flex-direction: column */
        }
    }


</style>
<body>

<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#menu">
&#9776;</button>

<div class="collapse navbar-expand-lg navbar-toggleable-sm" id="menu">
  <ul class="navbar-nav nav-responsive pull-md-right">
    <li class="nav-item"><a href="#" id="current" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="about" class="nav-link">About</a></li>
    <li class="nav-item"><a href="work" class="nav-link">Work</a></li>
    <li class="nav-item"><a href="contact" class="nav-link">Contact</a></li>
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

From the console showing Bootstrap styles:

Small screen:

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

Large screen:

@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; /* This will override the flex-direction: column */
}
}

How do I make the responsive navigation stack vertically on the small screen or landscape orientation on smartphones (using Bootstrap 4 alpha 2)?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in DJANGO-BOOTSTRAP4

Trending Questions

Popular # Hahtags

Popular Questions