CODEWITHSUNDEEP
htmlcssnavigation
rshah
rshah

Reputation: 691

Logo in middle of navbar messes up the rest of the navigation

I tried to center all my nav items and have them horizontally aligned

However when I added my .logo class to the navbar, all my navigation items move down.. how do i fix this?

Here is the JSFiddle: http://jsfiddle.net/nq397fby/

Upvotes: 0

Views: 103

Answers (3)

Alex
Alex

Reputation: 1205

http://jsfiddle.net/AlexCharlton/nq397fby/6/

ul.navigation li {
    vertical-align: top;
    display: table-cell;
    height: 40px;
    width: 20%;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.logo {
    position:relative;
    top: -30px;
    left: 6px;
}

Upvotes: 1

Brewal
Brewal

Reputation: 8189

Just use vertical-align: top

ul.navigation li {
    display: table-cell;
    height: 40px;
    width: 20%;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
}

demo

Edit : logo alignment

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position: relative;
    top: -37px;
}

demo

Upvotes: 0

SW4
SW4

Reputation: 71150

You can simply add position:absolute to your class:

Demo Fiddle

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position:absolute;
}

That said, you may actually wish to position the child link element to create better alignment:

Demo Fiddle

ul.navigation li.logo {
    margin: 0;
    padding: 0;
    position:relative;
}
ul.navigation li.logo a {
    position:absolute;
    left:20px;
    top:-42px;
}

Upvotes: 0

Related Questions