When viewing the website on a desktop, I like how the navigation bar looks. However, when resized to a mobile size, it aligns itself vertically under the heading instead of horizontally, which is what I want.
I attempted using "display: inline" but it did not resolve the issue.
I am familiar with media queries, but I need assistance in ensuring that each navigation item displays 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>