-1

I've created a corner ribbon for a site as per this tutorial

I seem to run into trouble when trying to put it in the top right corner, though, as the ribbon now extends the overall width of the site, and is visible all the way to the right when you scroll the page horizontally.

This is pretty easy to fix by placing the ribbon inside a wrapper with position: absolute, top:0, right:0 and overflow: hidden.

BUT this leads to another problem, namely the wrapper now overlaps my mobile menu (based on the select tag), rendering it unclickable. The ribbon needs to be on the top, well, because it's a ribbon, and it wouldn't do any harm either, if not for the forementioned wrapper.

So, my question is, is there any other way to hide the 'leftover' part of the ribbon on the right? Preferably something that wouldn't mess my navigation...

Samuli Viitasaari
  • 613
  • 7
  • 21
  • 2
    Is there any way I can get a link to inspect your problem? – toast Feb 15 '14 at 20:29
  • It's a client's site in production unfortunately, so I'm unable to provide you with the original link. I could end up reconstructing a simpler version on jsfiddle if I don't figure this out otherwise. I'll let you know if this happens. – Samuli Viitasaari Feb 15 '14 at 20:42
  • 1
    Creating a small, reproducible version of the problem is always a good idea – vals Feb 15 '14 at 21:16
  • 2
    A link/ fiddle is indeed needed in order to help you :-) – Ronen Cypis Feb 20 '14 at 07:27

1 Answers1

1

If you want to click though the ribbon:

pointer-events:none;

Explanation of click-though: Click through a DIV to underlying elements

Apply to mobile only: Creating a mobile web page with different css style

Community
  • 1
  • 1
ThorSummoner
  • 16,657
  • 15
  • 135
  • 147