Home/ Questions/Q 7962699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T05:24:39+00:00

Good Evening StackOverflowers! I am running into what seems to be a catch 22

  • 0

Good Evening StackOverflowers!
I am running into what seems to be a catch 22 with my code.
I am using the new CSS3 Ribbon Navigation with an image logo.

Here is my problem:

The Ribbon Navigation has overflow:hidden; in the css to hide the bottom parts of the ribbon. However, to get my logo in the middle of the navigation, I need to include it in the DIV. With overflow:hidden; on, it crops my logo (because it’s overflow), and my navigation looks like this:
https://i.stack.imgur.com/JoXyJ.png

Not wanting to cut off my logo, I remove the overflow:hidden; but then I run into the problem of the ribbon tags showing under the nav, like so:
https://i.stack.imgur.com/bZE26.png

It seems there is no simple solution to this. As a new developer, I find I am starting to pull my hair out a little. Is there a workaround that will make the ribbon tails disappear, and allow my logo to show?

This is my HTML code:

<body>
    <div class="ribbon">
        <a href='#'><span>Home</span></a>
    <a href='#'><span>Portfolio</span></a>
    <a href="index.php"><img id="logo" src="img/logo-grungewh.png" alt="logo"/></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Contact</span></a>
</div>

and my CSS code:

/************************* 
* Left Ribbon Navigation *
**************************/
.ribbon {
    margin-top:6em; 
}

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#D55E96;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon a:link, .ribbon a:visited { 
color:#000;
text-decoration:none;
float:left;
height:3.5em;
}

/********************* 
* Logo In Navigation *
**********************/
#logo {
margin-top:-5em;
z-index:3;
border:0;
}

Honestly, any advice or guidance would be truly appreciated. I have read many threads that have been posted on this, and they don’t seem to be on the same wave. Thank you Overflowers for putting up with newbie’s like me, and not ripping your hair out.
Best,
Laura

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What I would do is set the anchors in the ribbon to overflow hidden except the one that holds the logo

    .ribbon a:not(#logo-anchor){
    overflow:hidden;
}

    ​
    Fiddle

    If you target browser doesn’t support :not then give all the anchors except the one with the logo a class.

    .ribbon a.overflow-hidden{
    overflow:hidden;
}

    Fiddle

    • 0