Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Breadcrumb Navigation with CSS Triangles by Chris Coyier

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #208615
    jasonmih
    Participant

    Hi

    I have implemented the CSS triangle breadcrumb navigation on a test page on my site and think it looks great. It works well on a laptop and on an iphone in landscape but in portrait style the triangles are twice the height of the rest of the box. I was wondering if anyone knew of a way to reduce the scale of the triangles but that wouldn’t affect the laptop and landscape view which are both fine already.

    The page i have loaded it on is http://www.prophotocompany.co.uk/aviemorehouse.php.

    Thanks for your help.

    #208664
    jasonmih
    Participant

    Hi Beverleyh

    Thank you so much for taking the time to help, its very much appreciated and apologies for not using codepen. I hadn’t used it before so wasn’t sure what to do but i think i have done it now – http://codepen.io/jasonmih/pen/QjKYEM.

    The changes you said have very nearly sorted it. The only thing is that it has removed the triangle part but other than that it works now. I had to change the padding to – padding: 5px 7px 5px 5px; as with 15px it had a small white part over the second item.

    Any thoughts on how to get the triangle back although its not the end of the world to leave it like this?

    Thanks again for your help.

    Regards
    Jason

    #208682
    jasonmih
    Participant

    Hi Beverleyh

    You are a star! That worked and has sorted it.

    Thank you so much for all your help.

    Regards
    Jason

    #208700
    gcyrillus
    Participant

    maybe the way to use the coordonates for the pseudos is a hint too ?

            bottom:0;    
            right: -6px;
    

    http://codepen.io/anon/pen/bVBVwK

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.