I am struggling to align the social icons and their tooltips with the rest of my navbar. The issue is that the icons are not centered within the square, and their tooltips do not align correctly under the yellow box (although in other parts of the code, such as under the image and name, the tooltips are perfectly centered and aligned under the yellow box). Additionally, I am unsure how to create distance between them.
Apologies for the messy code, as I am new to HTML and CSS.
I utilized Bootstrap 4 for the navbar yellow box and Font Awesome for the social icons. https://i.sstatic.net/NwAlj.png https://i.sstatic.net/yztlp.png
I have omitted sections regarding the logo and title.
.container {
display: flex; /* allows me to align all elements */
margin: 15;
padding: 20;
}
.social {
position: relative;
display: inline-block;
}
/* Align list items */
.social ul{
display: flex;
}
/* Remove list item bullets */
.social ul li{
list-style: none;
display: inline-block;
}
/* Tooltip styling */
span.tooltiptext{
visibility: hidden;
width: 120px;
background-color:#803c25;
color:#fff;
text-align: center;
border-radius: 6px;
/* Tooltip positioning */
position: absolute;
z-index: 1;
top: 100%;
margin-left: -79px;
/* Tooltip blur effect */
opacity: 0;
transition: 0.3s;
}
/* Tooltip pointer position */
span.tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color:transparent transparent #803c25 transparent;
}
.social ul li:hover span.tooltiptext{
visibility: visible;
opacity: 1;
}
/* Social Media Icons */
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
}
.fa-facebook {
background: #3B5998;
color: white;
text-decoration: none
}
.fa-tripadvisor {
background: #00af87;
color: white;
text-decoration: none
}<!-- Bootstrap script for navbar background -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Navbar-->
<link href="nav.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<div class="container">
<div class="logo">
<a href="gestione.html">
<img src="./Immagini/logo.PNG">
<span class="tooltiptext"> Login Admin</span>
</a>
</div>
<div class="nome">
<a href="index.html">Il Brigante</a>
<span class="tooltiptext">Home</span>
</div>
<div class="social">
<ul>
<li>
<a class="fa fa-facebook" target="_blank"></a>
<span class="tooltiptext"> Seguici su facebook</span>
</li>
<li>
<a class="fa fa-tripadvisor"target="_blank">
</a>
<span class="tooltiptext"> Guarda le nostre recensioni</span>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>