I have two issues that I have been working on all day and cannot figure out. I am trying to add a picture in the top left corner of my nav bar above the home link but I can not get it to work, the other issue is I have a lighter color over my words used for links, and I can not figure out how to remove it. Any would be appreciated!
css
body,h3, p{
background:url('../img/city.jpg')no-repeat ;
background-position: center 35%;
font-family: "Montserrat", sans-serif
}
.fa{
color:black;
}
.side-bar{
position: fixed;
text-align: center;
padding: 10px;
top:0px; left:0px; bottom: 0px;
width: 120px;
background-color: #222;
transition: width ease .5s;
}
.side-bar a{
color:darkslategray;
text-decoration: none;
transition:
color ease .35s,
border-bottom-color ease .35s;
}
.side-bar a:hover{
color: #000;
font-weight: bold;
text-decoration:underline;
}
HTML:
<nav class="side-bar">
<img src="../img/sale.jpeg" style="width:100%">
<a href="#home" class="">
<i class="fa fa-home fa-4x"></i>
<p>Home</p>
</a>
<a href="#about" class="">
<i class="fa fa-user-circle-o fa-4x"></i>
<p>About</p>
</a>
<a href="#work" class="">
<i class="fa fa-code-fork fa-4x"></i>
<p>My Work</p>
</a>
<a href="#contact">
<i class="fa fa-envelope fa-4x"></i>
<p>Contact</p>
</a>
</nav>