I've reviewed a couple of previous questions, namely: Bootstrap NavBar with left, center or right aligned items but I haven't had any luck with solving my problem yet.
JSFiddle of the problem: https://jsfiddle.net/po0a6hf2/1/
Essentially what I'd like to do is have the branding in the navbar on the left, the main links in the center and finally the search and profile link on the right.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!---Style Sheets-->
<link rel="stylesheet" href="styles.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">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->
<title>Padd</title>
</head>
<body>
<!---Main Content-->
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light d-none d-lg-block">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<div class="row">
<!---Padd Branding-->
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images\notepad-logo2.png" alt="Notepad Logo"
style="width:150px;"></a></li>
</ul>
<!---Navigation Links-->
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Catalogue
</a>
<div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
<a class="dropdown-item" href="#">Furniture</a>
<a class="dropdown-item" href="#">Lighting</a>
<a class="dropdown-item" href="#">Decor</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore Pads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Style Quiz</a>
</li>
</ul>
<!---Search Bar-->
<ul class="nav navbar-nav justify-content-end">
<form class="form-inline my-2 my-lg-0 auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<!---User Profile-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
<a class="nav-link" href="#" id="navbarUserPic" role="button" aria-haspopup="true"
aria-expanded="false">
<img src="images\man.png" class="avatar">
</a>
<a class="dropdown-item text-center" href="#"><b>@Peter</b></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">My Pads</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!---Bootstrap JavaScript and jQuery-->
<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>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
var firebaseConfig = {
apiKey: "AIzaSyAY5wLj8AaQrhuIO2EOo4dSRkMJokUq3Yk",
authDomain: "notepad-it.firebaseapp.com",
databaseURL: "https://notepad-it.firebaseio.com",
projectId: "notepad-it",
storageBucket: "notepad-it.appspot.com",
messagingSenderId: "975709176926",
appId: "1:975709176926:web:c1aca8fc0c4f7db7"
};
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
CSS:
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navbar {
margin-left: 10px;
margin-right: 10px;
}
.main-logo{
width: 150px;
height: 50px;
}
.navbar-nav li a {
line-height: 50px;
}
.dropdown-menu > li > a {
height: 50px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
background-color: transparent !important;
z-index: 999;
}
.avatar img {
border-radius: inherit;
margin-right:20px;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}
.newPaddButton {
width: 32px;
height: 32px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
background-color: transparent !important;
z-index: 999;
}
.newPaddButton img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: 998;
}
.dropdown-menu {
width:200px
}
#navbarUserPic{
transform: translateX(68px);
}
@media screen and (max-widht: 780px)
{
dropdown-menu {
max-width:100%
}
}
.navBarBrand {
list-style: none;
position: absolute;
align-content: center;
padding: 0;
z-index: 1;
}
@media screen AND (min-width:991px) {
.navBarBrand {
padding: 6px 0px;
}
}
