Hey guys, I added this “ribbon” effect to the nav of a page, and I can’t get it to stay still. Whenever I scroll, zoom, or resize the triangle ends up moving. How do I keep this thing fixed to the nav bar so it never moves? Here’s the code:
#left_column {
position: fixed;
height: 100%;
width: 30%;
background-color: #F0F2F0;
}
.main_title {
margin: 5px 5px 20px 5px;
font-size: 35px;
text-align: center;
text-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px black, 4px 4px 1px black;
}
#left_column h2 {
font-size: 25px;
margin-bottom: 5px;
color: #4A738C;
}
nav {
position: relative;
margin: 0 -10px 50px 10%;
padding: 2px;
width: 93%;
background-color: #4A738C;
-webkit-box-shadow: 1px 1px 5px black;
-moz-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}
nav ul { text-align: center; }
.triangle {
border-color: transparent transparent transparent #41657A;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: relative;
left: 384px;
bottom: 65px;
z-index: -1;
}
