Archived topic

Adding CSS Ribbon to Site Primary Navigation

1 reply · Started by Tyler on April 19, 2018

Viewing posts 1–2 of 2

April 19, 2018 at 1:16 pm #555107

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! :)

April 19, 2018 at 9:29 pm #555336

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;
}

This archived topic is closed to new replies.

Start building better websites today.