0

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/

Community
  • 1
  • 1
Birdlady9604
  • 207
  • 5
  • 18

2 Answers2

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.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 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. – Birdlady9604 Apr 22 '14 at 01:33
  • Then it should be nav in absolute position at bottom : 0; http://jsfiddle.net/XS3Zs/3/ so header grows with height of logo. – G-Cyrillus Apr 22 '14 at 01:42
  • 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. – Birdlady9604 Apr 22 '14 at 01:45
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]

Amir5000
  • 1,718
  • 15
  • 19