I'm trying to align font awesome icons in the middle of the of the background image when I add position:relative; and use top:xxpx; it works but I want to figure out a way where I don't have to use position. Attached is a fiddle of my code, and a snippet below.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding-left: 540px;
display: inline;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons">
<i class="fa fa-facebook-square fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-instagram fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-youtube-square fa-6" aria-hidden="true"></i>
</li>
</ul>
</div>
I would use display: flex; align-items: center; justify-content: center; on the parent to put the child in the dead center. Then use padding: 0 on the ul to remove the default left padding.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
display: flex;
align-items: center;
justify-content: center;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
You say you don't want to use position, but because it causes other elements to shift around on the page. If you use position: absolute on the ul, nothing else will move around because of that.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
position: relative;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0; margin: 0;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
Related
I have a problem linking html(<li class="active"></li>) to icons and I do not know how to make icons different color after I click on them (color of an icon is black, when I click on an icon it does not stay white). I tried another way to get html in but then the animation did not work. I looked at millions of pages and I could not find an answer. On top of that, I am new to coding.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul
{
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li
{
list-style: none;
text-align: center;
display: block;
}
ul li:last-child
{
border-right: none;
}
ul li a
{
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon
{
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa
{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .icon .fa:last-child
{
color: #eeeeee;
}
ul li a:hover .icon .fa
{
transform: translateY(-100%);
}
/*
ul li a .name
{
position: relative;
height: 20px;
width: 100%;
display: block;
overflow: hidden;
}
ul li a .name span
{
display: block;
position: relative;
color: #000;
font-size: 18px;
line-height: 20px;
transition: 0.5s;
}
ul li a .name span:before
{
content: attr(data-text);
position: absolute;
top: -100%;
left 0;
width: 100%;
height: 100%;
color: #eeeeee;
}
ul li a:hover .name span
{
transform: translateY(20px);
}
*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<ul>
<div>
<ul>
<li class="active"></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Home">Home</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="About">About</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Contact">Contact</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Settings">Settings</span></div> -->
</a>
</li>
</ul>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I doubt you can solve this issue with a css-only solution - I might be wrong though.
Nevertheless you can do it with some Javascript trickery which goes a little like this:
layer an additional icon on top of your current icons, give it the desired color e.g. red and make it invisible by setting it's css opacity property to 0
attach a click event listener to the freshly created icons
inside the callback handler reset the opacity of all the red active icons to 0, reset the opacity of all the icons below (those that are used for the CSS animation effect) to 1, make the clicked icon visible and finally the two icons in the background invisible.
Here's an example (just click on 'Run code snippet'):
var buttons = document.getElementsByClassName("active");
buttons[0].addEventListener("click", clicked);
function clicked(e) {
var iconsToShow = document.querySelectorAll(`[class*="icon"]`);
iconsToShow.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.style.opacity = 1;
});
var iconsToHide = document.querySelectorAll(`[class*="active"]`);
iconsToHide.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.firstElementChild.style.opacity = 0;
});
var iconToHide = e.target.parentElement.parentElement.querySelectorAll(`[class*="icon"]`)[0];
iconToHide.style.opacity = 0;
e.target.style.opacity = 1;
}
for (var a = 0; a < buttons.length; a++) {
buttons[a].addEventListener("click", clicked);
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul {
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li {
list-style: none;
text-align: center;
display: block;
}
ul li:last-child {
border-right: none;
}
ul li a {
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon {
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa {
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .active .fa {
font-size: 40px;
transform: translateY(-250%);
color: #ff0e12;
opacity: 0;
}
ul li a .icon .fa:last-child {
color: #eeeeee;
}
ul li a:hover .icon .fa {
transform: translateY(-100%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<ul>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a class="button">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</body>
Please check the below snippet.
When a link goes on multiple lines, I'd like the text from all lines below the first one to be aligned with the start (left position) of the first line. The icon should still be vertically aligned with the first line (as it is now).
In other words, in the below example, the word "longer" should be aligned below the word "This".
I have tried playing with paddings and text-indents without success. Does anyone have a solution?
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>
Add this code in css..
.column li {
position: relative;
padding-left: 25px;
}
li span {
position: absolute;
left: 0;
top: 0;
}
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
.column li {
position: relative;
padding-left: 25px;
}
li span {
position: absolute;
left: 0;
top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>
Just add display:flex to your li and it will work if you want the text to move further away from the icon then use margins too.
Hope this is what you are looking for.
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li {
display: flex;
}
a {
margin-left: 10px;
}
.n {
width: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li>
<div class="n"><span class="fa fa-fw fa-tree"></span></div> Hello</li>
<li>
<div class="n"><span class="fa fa-fw fa-car"></span></div> This is a much longer link</li>
<li>
<div class="n"><span class="fa fa-fw fa-book"></span></div> Hello again</li>
</ul>
</div>
If we dont add width to icons and there is flex
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li
{
display:flex;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree" style="background-color:blue;"></span> Hello</li>
<li><span class="fa fa-fw fa-car" style="background-color:blue;"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book" style="background-color:blue;"></span> Hello again</li>
</ul>
</div>
As an alternative, you can also use a display: grid; layout on your li tag.
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
.column li {
display: grid;
grid-template-columns: auto 1fr;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>
Need to put circle around fontawesome social media link. I did it, but problem occurred with Facebook icon. The highlight circle is not fit like others. How to fix this ?
.social-media span {
list-style-type: none;
padding: 5px 5px;
background-color: pink;
display: inline-block;
border-radius: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
.social-media {
display: table;
border-spacing: 10px;
}
.social-media li {
list-style-type: none;
background-color: pink;
display: table-cell;
text-align: center;
height: 30px;
width: 30px;
font-size: 30;
vertical-align: middle;
border: 2px solid #ccc;
border-radius: 20px;
}
<html>
<head>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
</head>
<body>
<ul class="social-media">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
</html>
Apply height and width property for icons.
You could give the .social-media a width like this:
.social-media span {
list-style-type: none;
padding: 5px 5px;
background-color: pink;
display: inline-block;
border-radius: 20px;
width: 15px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
Here the solution
.circle{
border-radius: 50%;
margin: 0.15em;
font-size: 3em;
}
.fa-twitter{
background: #4099FF;
color: #FFFFFF;
padding: 0.05em 0.07em;
}
.fa-google-plus{
color: #FFFFFF;
background: #dd4b39;
padding: 0.1em 0.1em;
}
.fa-dribbble{
color: #ea4c89;
}
.fa-pinterest{
color: #cb2027;
}
.fa-facebook{
background: #3B5998;
color: #FFFFFF;
padding: 0.05em 0.3em;
}
.fa-youtube{
background: #bb0000;
color: #FFFFFF;
padding: 0.25em 0.25em;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-twitter circle"></i>
<i class="fa fa-facebook circle"></i>
<i class="fa fa-google-plus circle"></i>
<i class="fa fa-dribbble circle"></i>
<i class="fa fa-pinterest circle"></i>
<i class="fa fa-youtube circle"></i>
You can use fa-stack class, delete paddings and simply add text-align: center property. Here is working fiddle for you, and a snippet, and you will not need to create any additional classes
.social-media span {
list-style-type: none;
background-color: pink;
display: inline-block;
border-radius: 20px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-stack fa-facebook"></span></li>
<li><span class="fa fa-stack fa-envelope"></span></li>
<li><span class="fa fa-stack fa-twitter"></span></li>
<li><span class="fa fa-stack fa-youtube-play"></span></li>
<li><span class="fa fa-stack fa-instagram"></span></li>
</ul>
</body>
.social-media span {
list-style-type: none;
background-color: pink;
display: inline-block;
border-radius: 20px;
height: 30px;
width: 30px;
}
.social-media span i {
padding: 5px 9px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span ><i class="fa fa-facebook"></i></span></li>
<li><span><i class="fa fa-envelope"></i></span></li>
<li><span ><i class="fa fa-twitter"></i></span></li>
<li><span ><i class="fa fa-youtube-play"></i></span></li>
<li><span ><i class="fa fa-instagram"></i></span></li>
</ul>
</body>
.social-links {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
list-style: none;
}
.social-links li a:hover,
.social-links li a:focus {
color: #fff;
outline: none;
}
.social-links .nav li a {
font-weight: 400;
letter-spacing: 1px;
}
.phone{
float: right;
display: inline-block;
list-style: none;
}
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="top-bar">
<div class="container">
<ul class="social-links list-inline">
<li><a class="fa fa-facebook text-primary"></a></li>
<li><a class="fa fa-twitter text-primary"></a></li>
<li><a class="fa fa-instagram text-primary"></a></li>
<li><a class="fa fa-linkedin text-primary"></a></li>
</ul>
<ul class="phone list-inline">
<li><a class="fa fa-phone text-primary"></a></li>
</ul>
</div>
trying to make the icons inline and float phone to the right in bootstrap but i can't get it to work i dont know why i can't get the classes to work the only way that it works if i use style="" inside the ul
I have to display text left side and font awesome icon on the right side.Now I am getting all font awesome icon below of text.I think this may pretty simple, but still, I can not get it to work.Would you help me in this?
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
}
ul.address-top-menu {
list-style: none;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use Float. It will help you to push content to extreme right.
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
try to this..
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
display: inline-block;
}
Use float to handle the alignments. Check .top-contact-menu and ul.address-top-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: inline-block;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
float: left;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use flexbox over the class .top-contact-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
}
Try this:
.top-contact-menu:after{content:'';display:table;clear:both;}
.top-contact-menu h2{float:left;}
.address-top-menu{float:right;}