rdm100 rdm100 - 3 months ago 23
CSS Question

bootstrap social media buttons won't show

The bootstrap social media buttons were showing and now they aren't and I don't know why. Any ideas?

Also when I click the contact button on the menu, the point it jumps to is not lined up with the start of the contact section, it was previously working like the rest of the sections and I can't figure that out either.

link to the code pen

.navbar {
background-color: black;
}

.navbar ul li a {
color: #fff !important;
font-size: 15px;
}

.navbar ul li a:hover {
background-color: #fff !important;
color: black !important;
}

.navbar-brand {
color: #fff !important;
font-size: 20px;
}

/***** HOME *****/

#home {
background: url("http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg") no-repeat center center fixed;
background-size: cover;
height: 680px;
}

.home-wrap {
padding-top: 140px;
}

.home-header {
font-family: 'Lobster';
font-size: 80px;
color: #fff;
}

h2 {
font-family: 'Lobster';
font-size: 60px;
color: #fff;
}

.home-line {
border: 0;
height: 3px;
width: 90%;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 0, 1), rgba(0, 0, 0, 0));
}

.btn {
margin: 10px;
width: 80px;
border-radius: 5px;
background-color: black;
color: #fff;
border: none;
font-size: 20px;
}

.btn:hover {
background-color: silver;
color: black;
}

/***** ABOUT *****/
#about{
background-color: white;
padding-bottom: 80px;
}
.about-wrap {
width: 80%;
margin: auto;
margin-top: 95px;
}

h3 {
width: 80%;
margin: 0 auto;
font-size: 3em;
text-transform: uppercase;
text-align: center;
border-bottom: ;
padding: 0.2em;
}
.about-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.align {
width: 80%;
margin: 2em auto;
text-align: center;
}
.imga {
width: 120px;
height: 120px;
padding: 20px;
}

/***** PORTFOLIO *****/

#portfolio {
padding-top: 30px;
padding-bottom: 40px;
background-color: #EEDFCC;
}

.portfolio-header {
font-size: 3em;
color: #000;
}
.portfolio-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}

.placeholder-item {
margin-top: 40px;
text-align: center;
overflo: hidden;
}

.placeholder-desc {
margin-top: 10px;
font-size: 16px;
color: #000;
}

.imgp {
border: 1px solid black;
border-radius: 5px;
width: 100%;
}

.divider {
background-color: black;
height: 3px;
}


/***** CONTACT *****/

#contact {
background-color: white;
padding-top: 10px;
padding-bottom: 65px;
}
.contact-wrap {
margin-top: 60px;
}
.contact-header {
font-family: "Oswald";
color: #000;
font-size: 40px;
}

.contact-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}

.contact-wrap {
margin-top: 60px;
}

form {
margin-top: 50px;
}

input {
width: 40%;
height: 30px;
margin: 10px;
}

#message {
width: 40%;
height: 200px;
margin-top: 10px;
}

#submit-button {
widh: 10%;
height: 40px;
}

/***** FOOTER *****/

footer {
background-color: black;
height: 40px;
}

.footer-menu {
margin-left: -30px;
}

.footer-menu li {
display: inline;
margin: 10px;
}

.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}

.footer-menu li {
display: inline;
margin: 10px;
}

.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}

<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' rel='stylesheet' type='text/css'>

</head>
<!-- Navigation bar with the help of bootstrap -->

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio 1st Attempt</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="home">
<div class="home-wrap text-center">
<h1 class="home-header">Personal Portfolio Webpage</h1>
<h2>Social Media links</h2>
<hr class="home-line">
<div>
<a class="btn btn-default" type="button" href="#"><i class="fa fa-twitter"></i></a>
<a href="#" class="btn btn-default"><i class="fa fa-linkedin"></i></a>
<a href="#" class="btn btn-default"><i class="fa fa-github"></i></a>
<a href="#" class="btn btn-default"><i class="fa fa-fire"></i></a>
</div>
</div>
</div>
<div id="about">
<div class="container">
<div class="about-wrap text-center">
<h3>Skills</h3>
<hr class="about-line">
<div class="align">
<div class="row">
<div class="col-xs-6 col-sm-3">
<a href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/html_u7horu.png" alt="HTML5"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/css3_v0rzyx.png" alt="CSS3"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://rubyonrails.org/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/rails_jusgqs.png" alt="Rails"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/javascript_a2cxa4.png" alt="Javascript" ></a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<a href="http://jquery.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/jQurery_uy0yu0.gif" alt="jQuery"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="https://www.ruby-lang.org/en/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/ruby_t0scub.png" alt="Ruby"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://getbootstrap.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/bootstrap_xfpqre.png" alt="Bootstrap"></a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="https://en.wikipedia.org/wiki/SQL" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/sql_mnbnrc.png" alt="SQL"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio">
<div class="container">
<h1 class="portfolio-header text-center">PORTFOLIO</h1>
<hr class="portfolio-line">
<div class="placeholder-box">
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div id="contact">
<div class="container">
<div class="contact-wrap text-center">
<h1 class="contact-header">CONTACT</h1>
<hr class="contact-line">
<form method="post" action="#">
<div class="row">
<div class="col-md-12">
<input type="text" id="name" name="name" required="required" placeholder="Enter your name here"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="email" id="email" name="email" placeholder="yourname@example.com" required="required"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea id="message" name="message" required="required" data-minlength="20"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-default" id="submit-button" />
</div>
</div>
</form>
</div>
</div>
</div>
<footer>
<ul class="footer-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</footer>


Help much appreciated,

Thanks,

Rob

Answer

you forget add font-awesome css

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

https://codepen.io/anon/pen/dXEjbB?editors=1100