override parent overflow:hidden with child overflow:visible

Question

I have a header which is the parent of the nav and logo. I have set the parent to overflow:hidden so I was able to add margin-top to the nav to get it to sit at the bottom. However it clips the logo div as well. I was trying follow this question...Overriding overflow: hidden

so tried to set the logo to overflow:visible but that hasn't worked either. I am not sure of any other solution other than the logo not being in the parent container.

Here is my code

CSS:

.container {
width: 960px;
margin:0 auto;
background-color: blue;
}

header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;

}

#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}

nav {
    background-color:#1CCEAE;
    margin-top:63px; 
}

nav ul {
width:100%;
line-height: 37px;
    text-align:right;
    background-color:#1CCEAE; 

 }

ul li {
display: inline-block;
margin-right: 20px;
}

ul li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

Here is a fiddle http://jsfiddle.net/XS3Zs/

G-Cyrillus · Accepted Answer · 2014-04-19 09:10:45Z

1

remove width:100% to ul or reset padding to 0 to ul.

<ul> doesn't really need width:100%; since it is a block element, it will use all width avalaible., width set to 100% may be too much. Borders, margin and padding will not be estimated.

answered Apr 19, 2014 at 9:10

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Birdlady9604 Over a year ago

Ok but how would I go about making the logo extend outside of the nav box? As there is overflow:hidden applied to parent header. It seems I need this property for the nav bar.

G-Cyrillus Over a year ago

Then it should be nav in absolute position at bottom : 0; jsfiddle.net/XS3Zs/3 so header grows with height of logo.

Birdlady9604 Over a year ago

Ok I had it like that before but I was trying to find other alternatives to absolutely positioning, I guess that is the only solution I'll try that cheers.

Amir5000 · Accepted Answer · 2014-04-19 11:06:17Z

0

The UL element has by default padding-left:40px; so if you set that to 0 it will be fine.

I updated your [FIDDLE]

answered Apr 19, 2014 at 11:06

Amir5000

1,72815 silver badges19 bronze badges

Collectives™ on Stack Overflow

override parent overflow:hidden with child overflow:visible

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related