Sal P. Sal P. - 5 months ago 14
CSS Question

Anchor tags not working when positioned inside a Bootstrap navbar

My goal is to make a navbar with Bootstrap 3.3.6 with buttons placed inside it. These buttons are suppose to allow for navigation to different parts of the page, which was implemented with anchor elements.

However, when I positioned the buttons inside the navbar, the buttons don't work, which is confusing since the buttons allow for navigation when positioned outside the navbar.

Here is the complete code:



#bg-colr-div {
background-color: black;
color: white;
}

body h2 {
color: #1a1aff;
}

.container {
position: absolute;
left: 70%;
font-size: 1.5em
}

#abtme-btn {
position: relative;
top: 50%;
}

#portf-btn {
position: relative;
left: 10%;
bottom: 50%;
}

#contact {
position: relative;
left: 20%;
}

span {
size: 2em;
}

#center {
margin-left: 15%;
margin-right: 15%;
}

#aboutme {
border: solid white;
}

#name-title {
margin-top: 5%;
position: relative;
left: 25%;
font-family: gotham rounded;
}

p {
float: left;
position: relative;
left: 25%;
}

img {
border-radius: 100%;
position: relative;
left: 25%
}

#portfolio {
border: solid;
}

#portfolio h2 {
position: relative;
left: 45%;
}

#portfolio img {
position: relative;
left: 37%;
}

<head>

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<link type="text/css" rel="stylesheet" href="/home/salpal/Desktop/WebDev/FreeCodeCamp/Portfolio/Portfolio.css" />

<script src="jquery-1.12.2.min.js"></script>

</head>

<body>
<div id="bg-colr-div">
<div id="nav" class="navbar navbar-default navbar-fixed-top">
<ul class="container">
<li id="abtme-btn"><a class="btn btn-default navbar-btn" href="#aboutme">About Me</a></li>
<li id="portf-btn"><a class="btn btn-default navbar-btn" href="#portfolio">Portfolio</a></li>
</ul>
<!--Contact buttons-->
<div id="contact">
<a href="https://github.com/srpalomino" class="btn btn-social-icon btn-github">
<span class="fa fa-github fa-2x"></span>
</a>
<a href="https://www.facebook.com/salvatore.palomino" class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook fa-2x"></span>
</a>
<a href="https://www.linkedin.com/in/salvatore-palomino-105227103?trk=hp-identity-photo" class="btn btn-social-icon btn-linkedin">
<span class="fa fa-linkedin fa-2x"></span>
</a>
</div>
</div>

<div id="center">
<div id="aboutme">
<h2 id="name-title">Salvatore Palomino - Web Developer in Training</h2>
<p>My name is Salvatore Palomino, and this is my first portfolio!<br></p>
<aside><img src="https://lh3.googleusercontent.com/-nTCcGhM4rEk/Ujn7oi5IFlI/AAAAAAAAABM/NjPoBSeOpBI/w426-h427/13797_510377245660711_1806374138_n.jpg" /></aside>
</div>

<div id="portfolio">
<h2>Portfolio</h2>
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
<img src=# alt="Placeholder">
</div>
</div>
</div>
</body>




Answer

The problem is that the #contact div that is containing your social media buttons is covering the navigation buttons. Just change that div to display:inline-block;

#contact {
    position: relative;
    left: 20%;
    display: inline-block;
}
Comments