I am working on a website and I'm having trouble setting up the navbar. I want all of the navigation links to be centered when the navbar is expanded, but NOT when the navbar is in its collapsed form. When it is in its collapsed form, I'd like them vertically stacked and aligned to the left side of the page. I can successfully get the links centered OR left aligned on collapse, but not both.
Here is my HTML with the navbar code. In the navbar ul element with the class abs-center-x, that was a method I previously tried and you'll see it commented out in the CSS if that helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<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>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top">
<a href="./index.html" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav abs-center-x" id="navElements">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Prelicensing</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Schedule & Cost</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Defensive Driving</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Road Test Prep.</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Reviews</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
This is my CSS, with the abs-center-x class commented out and my current code.
/*
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
*/
@media (max-width: 768px) {
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
Unfortunately, I've already tried most of the resources here on Stack Overflow and I can't seem to find a solution.
Thank you for your help!
- Trifex
