Menu icon Foundation
Breadcrumbs break links on ipad

Hi - I've got a site all set up and working nicely with foundation. However I'm having one problem which is on an ipad you have to click links twice before the page will load. I've managed to isolate it down to one bit of css which when I remove it fixes the issue completely. The offending code is:

    .breadcrumbs > *:hover a, .breadcrumbs > *:focus a {
      text-decoration: underline; }
            

         

It's part of the core foundation I think. I'm using the SCSS version with bower so I don't want to edit the files in the Bower folder. I'm just wondering if there's a way to override this bit of CSS so I can get things working.

I'm really not sure why that particular bit of code would cause it to break all links but unfortunately it does.

Thanks for any help

breadcrumbslinksipad

Hi - I've got a site all set up and working nicely with foundation. However I'm having one problem which is on an ipad you have to click links twice before the page will load. I've managed to isolate it down to one bit of css which when I remove it fixes the issue completely. The offending code is:

    .breadcrumbs > *:hover a, .breadcrumbs > *:focus a {
      text-decoration: underline; }
            

         

It's part of the core foundation I think. I'm using the SCSS version with bower so I don't want to edit the files in the Bower folder. I'm just wondering if there's a way to override this bit of CSS so I can get things working.

I'm really not sure why that particular bit of code would cause it to break all links but unfortunately it does.

Thanks for any help

Rafi Benkual about 4 years ago

Hmm, I couldn't replicate on an Ipad 3 or an Iphone 6.

If you need to override this CSS, you can just copy the selector into your overrides file, be it, app.scss or another custom stylesheet you created.

.breadcrumbs > *:hover a {
  text-decoration: none;
}

Chris Shelswell about 4 years ago

Hey thanks for the reply. Yeah it's a really strange one. I did try overriding it like you suggested before but the only way I've managed to get it working is to remove the code in my first post from the compiled CSS.

It's really strange as I don't have breadcrumbs on the pages it's breaking and I don't have any other selectors using "breadcrumbs" that i've made either.

Can't figure it out... I can post the link though the site might not be exactly suitable for work, hence leaving it off. Not graphic but not for a busy office :)