CODEWITHSUNDEEP
htmlcssresponsive-design
MistUnleashed
MistUnleashed

Reputation: 309

Can't Centre Header Contents - Navigation and Logo into one line

I'm having this problem where I have a logo and some navigation links in a <header> and when I use the CSS text-align:center; the logo goes on 1 line in the centre and the navigation links go onto another line directly beneath it.

Ideally I would like them to be on one line next to each other.

In the JSFiddle below I have added a float:left; onto the .logo class to have them on the same line as a temporary fix.

My JSFiddle: https://jsfiddle.net/z4f21hx3/1/

Any help is appreciated.

Thanks,

MistUnleashed

Upvotes: 0

Views: 32

Answers (1)

hopkins-matt
hopkins-matt

Reputation: 2823

This will fix it until about 605px and under.

CSS:

/* Beauty Queen 7 CSS */

/* CSS Reset */
 * {
    margin:0;
    padding:0;
}
/* CSS Main */
 html {
    background-color:#FFF;
}
header {
    background-color:#FFF;
    width:100%;
}
nav {
    text-align:center;
    margin:0 auto;
    display:block;
    box-shadow:0 4px 2px -2px gray;
}
.logo {
    display:inline-block;
    //float:left;
    height:120px;
    vertical-align:bottom;
}
.logo img {
    height:120px;
    width: auto;
}

nav ul {
    list-style:none outside none;
    margin:0;
    padding:0;
    display:inline-block;
}
nav ul li {
    display:inline-block;
    list-style:none outside none;
    -moz-transition:all 300ms ease-in-out 0s;
    -ms-transition:all 300ms ease-in-out 0s;
    -o-transition:all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition:all 300ms ease-in-out 0s;
}
nav ul li a {
    color:#555;
    display:block;
    line-height:5em;
    padding:3em 1em 0em 1em;
    text-align:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:15px;
    text-decoration:none;
    -moz-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
}
nav ul li:hover {
    background-color: #F36;
    color: #FFFFFF;
}

DEMO: JSFiddle

Upvotes: 1

Related Questions