CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Berglund
Berglund

Reputation: 676

Bootstrap 4 make navigation vertical on xs screen width

How to create this top navigation bar responsive using Bootstrap 4. By responsive I meant, I want to make this navigation bar collapse in small screens so it's neat.

I tried adding 'xs' for navigation, but it didn't work (it didn't collapse) .

Does bootstrap 4 support this feature? Or do we have to make custom styles to achieve this? Any input would be appreciated!

/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #0275D8;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #fff;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

* {
  border-radius: 0 !important;
}

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

/*
 * Blog name and description
 */




/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="/favicon.ico">

  
  <title>Bootstrap 4 Template</title>

  <link rel="stylesheet" href="Navigation Bar.css">
  <link rel="stylesheet" href="Sticky Footer.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">

  <style type="text/css">
    
    html,
    body {
      overflow-x: hidden;
    }
    
  </style>

</head>

<body>

  <div class="blog-masthead col-xs-12">
        <div class="container">
            <nav class="blog-nav">
                <a class="blog-nav-item active" href="#">Home</a>
                <a class="blog-nav-item" href="#">New features</a>
                <a class="blog-nav-item" href="#">Press</a>
                <a class="blog-nav-item" href="#">New hires</a>
                <a class="blog-nav-item" href="#">About</a>
            </nav>
        </div>
    </div>

Upvotes: 1

Views: 2666

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

You could use the flexbox utility classes which are responsive.

  • Make the nav display:flex using d-flex
  • Use flex-sm-row to make it horizontal on sm and up
  • Use flex-column to make it vertical on xs

https://www.codeply.com/go/wNPuPmnAvw

 <div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav d-flex flex-column flex-sm-row">
            <a class="blog-nav-item active mr-2" href="#">Home</a>
            <a class="blog-nav-item mr-2" href="#">New features</a>
            <a class="blog-nav-item mr-2" href="#">Press</a>
            <a class="blog-nav-item mr-2" href="#">New hires</a>
            <a class="blog-nav-item mr-2" href="#">About</a>
        </nav>
    </div>
</div>

Upvotes: 3

Related Questions