nethken nethken - 6 months ago 20
HTML Question

Responsive links in header

Hello i want my social media icons in my header to be responsive but when i minimized the browser the social media icons are not showing. Can someone give me ideas how to do it? should i use media queries for this?

Here is the picture when not minimized.
enter image description here

here is the picture when minimized the social media icons disappeared.
enter image description here

here is my html code.

<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>

</div>
</div>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
</body>
</html>


here is my css

.top-bar-dark {
background-color: #a92419;
}

.top-bar-light {
background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
border-color: #ddd;
}

.top-bar-light .top-dark-right li a:hover {
color: #32c5d2;
}
.top-bar-socials {
line-height: 30px;
padding-top: 5px;

}
.top-bar-socials:after {
display: table;
clear: both;
content: "";
}
.top-bar-socials a {
margin: 0px 8px;
text-decoration: none;
font-size:18px;
color: #fff;
}

.top-dark-right {
margin: 0px;
padding: 0px;
}

.top-dark-right li {
line-height: 40px;
border-left: 1px solid #932015;
padding: 0px 10px;

}

.top-dark-right li, .top-dark-right li a {
color: #d7d7d7;
font-size: 12px;
}

.top-dark-right li i {
margin-right: 5px;
}

.top-dark-right li a:hover {
color: #fff;
}
a.login{
text-decoration: none;
}
.fa-facebook:hover{
color:#3b5998;
}
.fa-twitter:hover{
color:#1dcaff;
}
.fa-linkedin:hover{
color:#007bb5;
}

Answer

The reason that they disappear is because you have applied the "hidden-xs" class to the div containing the social media icons. Remove that class to persist the social media icons. Happy to post code example if need be, but try that as a start. You may want to add styles to media queries to adjust size and position, etc.

Remove class from here:

<div class ="top-bar-dark">
    <div class="container">
        <div class="row">
              <div class="col-sm-4 hidden-xs">