Trying to centre navbar content [duplicate] - html

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I am currently using Bootstrap and it is giving me quite the headache. I'm having a lot of trouble understanding it but feel determined to use it in order to be able to make my website responsive and therefore support mobile devices.
I am trying to centre my navbar content but am having the hardest time doing so. Everything I have tried it never moves and always stays attached to the right with a margin on either side. Could someone please point me in the right direction to fixing this?
* {
box-sizing: border-box;
}
body {
background-color: #393939
}
/*
-=-=- NAVIGATION BAR -=-=-
*/
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
}
.navlink {
display: inline-block;
color: #C9C9C9;
padding: 10px;
padding-bottom: 10px;
background:
linear-gradient(white, white)
bottom
/100% 0px
no-repeat;
transition: 0.2s all;
}
.navlink:hover {
color: #FFF;
text-decoration: none;
background-size: 100% 4px;
}
.active {
color: #FFF;
}
/*
-=-=- SOCIAL MEDIA -=-=-
*/
.social-icon {
float: right;
font-size: 1.5em;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav">
<div class="container">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!-- <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Since you are using bootstrap 4, you can simple use bootstrap 4's flex-box utility classes to center your navbar links, in your case you just have to add these classes to parent container of your links which is div with class container.
<nav id="header-nav" class="navbar-nav">
<div class="container d-flex justify-content-center">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!-- <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
</div>
</nav>
in above code the d-flex class makes the div as a flex-box and justify-content-center aligns its content to center.
Hope it helps!

The elements with .navlink class are inline elements which means they respond to the text-align: left|center|right css property on the parent container.
Bootstrap have a class to apply the css property text-align: center, it's text-center, apply this class to the container element and the nav items will center align*.
<div class="container text-center">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

As your navlink elements have display: inline-block by default, you can add a text-center class to the container div and those elements will be centered.
<div class="container text-center">
...
</div>

Related

How can I make a dropdown as a navbar-toggler?

What I'm trying to do is make on my own a webpage with bootstrap.
I want to, instead of a navbar-toggler, put a dropdown. I am not fully familiar with JS yet. For this reason, I wanted to do it with only bootstrap.
I put a #media to change the #TheNav display to none at certain screen width. At the same time the opposite with the dropdown. The problem is that the dropdown doesn't work, I've been trying different things but nothing. So what I've done is to copy a predetermined bootstrap dropdown and put it below everything, and still doesn't work!! I revised having all bootstrap links in order and position,...
THIS IS THE HTML DOCUMENT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/Tabler/logo.png">
<!-- bootstrap head link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="tabler.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<title >tabler</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="text-decoration-none navbar-brand ms-5 ps-5 mt-0 pt-0">
<div class="d-flex justify-content-center">
<img src="/Tabler/logo.png" style="width: 25px; height: 25px;">
<span class="mx-2 text-dark fw-bold" style="font-family: 'Nunito', sans-serif;">
tabler
</span>
</div>
</a>
<div class="me-5 pe-5" id="TheNav">
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Demo</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Source Email</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Tabler Email</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="Jumbo">
<div class="col-lg-6 text-center">
<h1 class="text-white mt-5">Admin panel made simple. For Free!</h1>
<p class="subHed text-white my-4">Premium and Open Source dashboard template with responsive and high quality UI.</p>
<div class="mb-5">
<button class="text-white downloadBut btn me-1">
Download
</button>
<button class="text-dark bg-white text-bold btn ms-1" id="demoBtn">
Browse Demo
</button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- bootstrap body links -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
AND THIS IS THE CSS
.downloadBut {
background-color: rgb(38, 187, 71);
}
#Jumbo {
background-color: rgb(27, 150, 231);
}
.btn {
border: none;
padding: 8px 16px;
font-size: 11px;
font-weight: bold;
border-radius: 2%;
}
.subHed {
font-size: 16px;
font-weight: 450;
opacity: .8;
}
h1 {
font-size: 22px;
}
#demoBtn {
color: rgb(180, 177, 177);
}
.nav-link {
color: rgb(83, 82, 82);
}
#media screen and (max-width: 580px) {
#TheNav {
display: none;
}
}
#media screen and (min-width: 581px) {
#TheNav {
display: flex;
}
}
#media screen and (min-width: 581px) {
.dropD {
display: none;
}
}

Fix position of elements when hovering on other elements

I have some icons inside li's of a ul list. I want to make font-size bigger when hovering on icons.
The problem is When I hover over the icons, the position of the other icons changes.
css & html:
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
transition: 0.3s;
font-size: 30px;
}
i.s-m-i:hover {
color : blue;
font-size: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>
How should I fix other icon's position?
Thank you.
try this instead,
use transform scale property instead of change font-size in hover
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
font-size: 30px;
transition: all .3s ease-in-out;
}
i.s-m-i:hover {
color : blue;
transform: scale(1.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>

Boostrap 4 sticky footer height issues

I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li>About</li>
<li>Help</li>
<li>Accessibility</li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>©  </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you're going to use Bootstrap's grid system, then it's a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticky Footer inspired by Bootstrap Examples</title>
<!-- Bootstrap 4 CDN as of 01/17/2020 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome 4.7 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
}
.fa {
color: white;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Main page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Main container</h1>
</div>
</main>
<!-- Respoonsive footer using Bootstrap's grid layout -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col align-self-center">
<i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
</div>
<div class="col">
<h5>Site</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">About</a></li>
<li><a class="text-muted" href="#">Help</a></li>
<li><a class="text-muted" href="#">Accessibility</a></li>
</ul>
</div>
<div class="col">
<h5>Legal</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Terms of Service</a></li>
<li><a class="text-muted" href="#">Privacy Policy</a></li>
<li><a class="text-muted" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Working example here
I have edit your css & HTML
html,body, .wrapper {
position: relative;
height: 100%;
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
}
.copyright-container
{
padding: 10x;
}
https://jsfiddle.net/lalji1051/r5aqxetv/7/

Sidebar z-index always higher than dropdown

I made a sidebar which consists of 2 nav elements absolute positioned next to each other. At the bottom of my so-called "sub-sidebar," I have an image that acts as a dropdown. When I activate the dropdown the menu item itself always lays behind the so-called "main-sidebar". To make this clear, I have an illustration.
While it is supposed to look like this
In my CSS(Sass) I have never set any z-index whatsoever. What is causing this problem
CODE
.dashboard-sub-sidebar {
width: 64px;
background-color: #f9328e;
position: fixed;
display: block;
top: 0;
left: 0;
height: 100vh;
padding: 24px 0 24px 0;
}
.dashboard-sidebar {
transition: width 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
width: 250px;
height: 100vh;
background-color: #f9328e;
position: fixed;
top: 0;
left: 64px;
display: block;
padding: 15px;
color: $text-white;
}
<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">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="dashboard-sub-sidebar">
<div class="dashboard-sub-sidebar-container">
<div class="dashboard-sub-top-content text-center text-white">
<div class="dashboard-sub-top-logo">
LOGO
</div>
<div class="sidebar-icon-box slideout mt-4" data-slideout-block="search">
<i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>
</div>
<div class="dashboard-sub-user-content text-center">
<div class="sidebar-icon-box slideout mb-3" data-slideout-block="notification">
<i id="dashboard-sub-notification" class="fa fa-bell dashboard-sub-notification"></i>
</div>
<div class="sidebar-icon-box mb-3">
<i id="dashboard-sub-help" class="fa fa-question-circle dashboard-sub-help"></i>
</div>
<div class="btn-group dropright">
<img src="http://s3.amazonaws.com/images.seroundtable.com/google-dog-badge-1526987203.jpg" class="dashboard-sub-sidebar-user-image dropdown-toggle" alt="" width="40" height="40" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu">
<ul class="list-unstyled">
<li>Profiel</li>
<li>Account instellingen</li>
<li>Uitloggen</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<nav id="dashboard-sidebar" class="dashboard-sidebar shadow">
<div class="dashboard-sidebar-brand">
<h5>Logo bedrijf</h5>
</div>
<ul class="dashboard-sub-content list-unstyled">
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem active"><i class="fal fa-window-maximize"></i>Dashboard</li>
</a>
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-folder"></i>Projects</li>
</a>
<a href="#" class="dashboard-sidebar-link slideout slideout-item" data-slideout-item="clients">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-tie"></i>Clients</li>
</a>
<a href="#" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-friends"></i>Employees</li>
</a>
<a href="your_company.html" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-building"></i>My company</li>
</a>
</ul>
<button id="dashboard-sidebar-toggle" class="btn btn-light btn-sm shadow dashboard-sidebar-toggle"><i class="fal fa-arrow-left"></i></button>
</nav>
Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements.
In your example, as the tooltip's parent .dashboard-sub-sidebar is declared before dashboard-sidebar, this last one is automatically above .dashboard-sub-sidebar and his children due to order of appearance. Add a z-index to .dashboard-sub-sidebar will fix the issue.

How to shift the leftmost item of the Bootstrap navigation bar to further left

I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.