[Solved] Need Help Adding Ribbon to Menu

[fryec1135]

Hey guys (and ladies),

This is my first post here, with many more to come I’m sure. I’m trying to add a ribbon to a WordPress site’s navigation. I have it nearly complete, but I can’t seem to get the right CSS triangle to show up using #menu-nav:after. Like I said, I did the left side with absolutely no problem. Why am I having a problem with the right? Is it something to do with the margins?

Thanks for you feedback. It is MORE than appreciated.

The website is bestplayerintheworld.com and below is the CSS I’m applying. You will need to use Firebug or Chrome to apply it yourself (obviously):

#menu-nav.menu li a {
     border: medium none ! important;
     margin-bottom: 1em;
     margin-top: -1em;
}

#menu-nav:before, #menu-nav:after {
     content: "";
     display: block;
     position: relative;
     top: 58px;
     z-index: -10;
}

#menu-nav:before {
     border-color: rgba(0, 0, 0, 0) #008000 rgba(0, 0, 0, 0) transparent;
     border-style: solid;
     border-width: 0px 22px 25px 0px;
     height: 0px;
     left: -10px;
     width: 0px;
}

#menu-nav.menu {
     background-color: #029202 ! important;
     border: medium none ! important;
     padding-left: 1em ! important;
     padding-right: 1em ! important;
     position: relative;
     right: 24px;
     width: 103%;
}

#page {
     box-shadow: 0px 2px 18px #191919 ! important;
}

#footer {
     height: 0px ! important;
}

body {
     background-color: #ffffff ! important;
     background-image: url("http://bestplayerintheworld.com/wp-content/uploads/2014/08/BPITW-logo.png") ! important;
     background-position: left top ! important;
     background-repeat: repeat ! important;
}

A tip on how to apply CSS to a forum post would be great too! :)

[chrisburton]

Please use CodePen for your code.

[fryec1135]

Thanks Chris, I will be sure to do that from now on. And I will update this post when I get home.

If anyone has any tips on this before I get back, I’d really appreciate it. Thanks!

[fryec1135]

Okay, I’ve created a CodePen for this entry. If anyone knows how to create the right side CSS triangle that goes on the menu, I would be MORE than grateful!

http://codepen.io/fryec1135/pen/wdrel

[fryec1135]

Here is an updated CodePen. I’ve made sure that my #menu-nav:before, #menu-nav:after are positioned absolute.

http://codepen.io/fryec1135/pen/dgoEH

It may just be a matter of positioning that right triangle at this point. But I don’t see it anywhere on the page.

[fryec1135]

Well, I got it sorted out thanks to Stack Overflow. In case anyone else is having a similar issue, the answer to my problem is here: http://stackoverflow.com/questions/25091059/how-to-make-right-side-triangle-in-css-ribbon-menu

[Author]

Posts