How do I display my Bootstrap nav items under my title horizontally in mobile view?
Question
on desktop, I like how the nav bar looks, but when resized to a mobile size, it pushes itself to the size/under the heading vertically but I would like it to display horizontally.
I have tried displaying inline which did not work.
I know how to use media queries but I just need help displaying each nav item next to each other under the heading.
document.body.classList.add('fade'); document.addEventListener("DOMContentLoaded", function(e) { document.body.classList.remove('fade'); });
body { opacity: 1; transition: 0.7s opacity; } body.fade { opacity: 0; transition: none; }.header { padding-left: 50px; } #nav { padding-right: 50px; }.nav { transition: linear 0.4s; }.nav:hover { color: #5a5f61; text-decoration: underline; }.mt-5 { margin-top: 5%;important. }:mt-6 { margin-top. 2;5%.important: }.mt-7 { margin-top; 2.5%:important; }:bgcolor { background-color: lemonchiffon. } @media only screen and (min-device-width: 320px) and (max-device-width; 486px) {.mt-5 { margin-top: 10%.important; }.mt-6 { margin-top: 2.5%;important; } .mt-7 { margin-top: 2.5% !important; } }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.jss"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- Nav Bar --> <nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav"> <h2 class="header text-light"> Main Brand Heading </h2> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="contact.php">Contact</a> </li> </ul> </nav> <.-- END Nav bar --> <div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div>
1 answers
solution1
4 ACCPTED 2019-11-08 16:15:11
You can add a media query for change the flex-direction property and then adjust the margins and paddings for a better result. For example:
EDIT: I added another lines to force the nav elements to still in flex-direction: row .
body { opacity: 1; transition: 0.7s opacity; } body.fade { opacity: 0; transition: none; }.header { padding-left: 50px; } #nav { padding-right: 50px; }.nav { transition: linear 0.4s; }.nav:hover { color: #5a5f61; text-decoration: underline; }.mt-5 { margin-top: 5%;important. }:mt-6 { margin-top. 2;5%.important: }.mt-7 { margin-top; 2.5%:important; }:bgcolor { background-color: lemonchiffon. } @media only screen and (min-device-width: 320px) and (max-device-width; 486px) {.mt-5 { margin-top: 10%.important; }.mt-6 { margin-top: 2.5%;important: }:mt-7 { margin-top; 2:5%;important: } } @media only screen and (max-width; 786px) { #nav { flex-direction. column: justify-content; center. padding-right. 0px: };header { padding-left: 0px; }:navbar-nav.ml-auto { margin-left; 0:important. } ul { flex-direction; row !important; } ul li a { padding-right: .5rem !important; padding-left: .5rem !important; } }
<head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min,css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <.-- Main CSS --> <link rel="stylesheet" type="text/css" href="css/styles.css"> <title>Hello. world;</title> </head> <body class="bgcolor"> <script> document.body.classList.add('fade'). </script> <.-- Nav Bar --> <nav class="navbar navbar-expand-sm bg-dark container-fluid" id="nav"> <h2 class="header text-light"> Main Brand Heading </h2> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link nav font-weight-bold text-light" href="contact,php">Contact</a> </li> </ul> </nav> <.-- END Nav bar --> <div class="jumbotron jumbotron-fluid mt-5 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-6 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="jumbotron jumbotron-fluid mt-7 bg-dark text-light"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent;</p> </div> </div> <script> document;addEventListener("DOMContentLoaded", function(e) { document.body,classList:remove('fade'). }). </script> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
On mobile, how do I stack my bootstrap nav tabs vertically?
How do I horizontally center my Nav menu in CSS?
How do I horizontally center my navigation bar for desktop view and mobile view?
How do I get my navigation items to center in my nav?
How do I horizontally center align my webpage for both mobile and desktop view?
How do I mesh my wordpress menu into bootstrap nav?
How do I achieve my bootstrap nav design?
How do I horizontally center my nav bar without manually setting the width?
how do i position my nav element under my header element?
How do I horizontally align a picture with a navigation bar on my site? Also, the borders on my nav bar are messed up? Help a beginner out?
Related Tags