Logo and Nav in one line

Language Help HTML
1

Hi guys, I am stuck at on the navigation bar. (Project Junction). I want my logo and the navigation in one single line. Does anybody know how to solve this?

CSS:

html, body {
margin: 0;
padding: 0;
font-family: ‘Merriweather’, serif;
}

body {
background: url(https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

.container {
max-width:940px;
}

/* Header */
.header {
padding: 10px 0;
background: rgba(0,0,0,.5);
}

.nav {
display: inline;
}

.nav li {
display:inline;
}
.logo {
width: 20px;
display:inline-block;
}

/* Jumbotron */
.jumbotron {
position: relative;
top: 50px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);
}

/* Supporting */
.supporting {
margin-top: 40px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);
}

2

Hey Ben,

Would you mind posting your HTML code, too?
You’ll need to format it so it’s visible :slight_smile:

3

change the .nav display: inline; to display: inline-block; I was having the same issue.

1 Like
4

I hope making the logo to become part of the list is acceptable :hushed:

<ul class="nav"> <li><img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" /></li>
            <li>About</li>
            <li>Blog</li>
            <li>Help</li>
            <li>Contact</li>
          </ul>
7

I put both logo and nav into inline-block. This allowed me to adjust the margin to fit the logo and the navigation link vertically aligned. I floated the logo to the left to have them all aligned in one line.

.logo {
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;
float:left;
}

.nav {
display: inline-block;
margin-top:15px;

1 Like