CODEWITHSUNDEEP
htmlcssresponsive-designdjango-bootstrap4
Christy
Christy

Reputation: 21

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

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.

Upvotes: 2

Views: 1375

Answers (1)

readyplayer77
readyplayer77

Reputation: 2159

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 */
}
}

Upvotes: 1

Related Questions