[Resolved] Adding CSS Ribbon to Site Primary Navigation

Home Forums Support [Resolved] Adding CSS Ribbon to Site Primary Navigation

Home Forums Support Adding CSS Ribbon to Site Primary Navigation

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #555107
    Tyler

    Hey Tom,

    I found some nice CSS code I am using for a ribbon feature on a website.

    https://codepen.io/diegopardo/pen/knwth?utm_source=bypeople

    In the link supplied you can see the website I am currently working on. I have managed to apply the class to my H1’s but now I need the effect on the left and right side of the primary navigation, preferably in css.

    When I went to copy the code from my current ribbon on my H1’s it kept wigging out the nav, I even tried editing it a few times, I think maybe because the code for the ribbon and the main nav have some similar attributes that it is causing the problem.

    Please help! 🙂

    #555336
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    #site-navigation .inside-navigation:before, 
    #site-navigation .inside-navigation:after{
      position:absolute;
      content: '';
      display: block;
    }
    
    #site-navigation .inside-navigation:before{
      width: 0.469em;
      height: 100%;
      padding: 0 0 0.438em;
      top:0;
      left: -0.469em;
      background:inherit;
      border-radius: 0.313em 0 0 0.313em;
      visibility: visible;
      overflow: visible;
      line-height: 1;
      font-size: inherit;
    }
    
    #site-navigation .inside-navigation:after{
      width: 0.313em;
      height: 0.313em;
      background: rgba(0,0,0,0.35);
      bottom: -0.313em;
      left: -0.313em;
      border-radius: 0.313em 0 0 0.313em;
      box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
      visibility:  visible;
      overflow: visible;
      line-height: 1;
      font-size: inherit;
    }
    
    #site-navigation .inside-navigation {
      position:relative;
      padding: 0 0.5em;
      font-size: 2em;
      border-radius: 0 0.156em 0.156em 0;
      background: rgb(123, 159, 199);
      box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
      background: #e1662f;
      height: 45px;
    }
    
    #site-navigation {
        background: transparent;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.