Resize issue with ribbon

Question

I am using a code I found online for a ribbon however there is a problem when resizing the browser/viewing it on a smaller/bigger resolution.

This is my code: http://codepen.io/seraphzz/pen/JhBnG I have tried using percentages but it didn't work.

This is how it's supposed to look like: http://cl.ly/image/0E1B2u1I1F1E/content

Thanks.

Answer 1

thanks for the codepen.

you use absolute positionning, this is why it does not move. If you still want it absolute, then use absolute positionning for the containair that will receive your menu.
So set this container a 100% width from left to right.
Inside that container you can put a smaller container with auto margin so it can move inside absolute container.

For your page, i removed absolute for relative. from nav and set it on margin auto;
start and end ribbon are positionned from nav wich is the "relative" reference.
http://codepen.io/gcyrillus/pen/IjDAo
updated :codepen:
what's new :

#wrap{
  padding-top:150px;
}

#nav{
  top: 90px;
  margin:auto;
  position:relative;
  width:880px;
}

.ribbon-start {
  left:-85px;
  position:absolute;
  overflow:hidden;
  height:50px;
}
.ribbon-end {
  left:890px;
  position:absolute;
  height:50px;
  overflow:hidden;
}

hope it helps you to understand a little more about positionning.