How to make my logo and nav bar completely inline?

Im making my header but how do i make my nav bar “About, Contact and Portfoli” be in line with Logo?

Write this in CSS:

logo {
  display: inline;
}
1 Like

I know its not what you are asking for. but for this kind things i will automatically go for a Bootstrap Navbar

1 Like

You can use display: inline-block;

But first, let me explain what inline, inline-block and block does! Maybe you and a lot of people don’t know what it does at all.

Prologue: For web, a text has some properties you cannot use on block, and block’s properties you cannot use on a text. Try to give to any word on your code the property width or height! You can, but nothing will happen. So, let’s learn more about this attr

First: Inline

When you use inline you are basically saying “Hey, this thing is a text, should behave like a text”. So it will look like a text, without width, without height, without a lot of block properties, but with a lot of inline (text) properties such as space, font-size, text-align, etc. Let me show you an example:

I have this list:

Which has those attr:

.ul {
color: #FFF;
}
.li {
width: 25%;
height: 150px;
}
.primeiro{
background-color: #FAA116;
}
.segundo {
background-color: #57C7C3;
}
.terceiro{
background-color: #3B97D3;
}

I want to make a list like this:

So, what if I gave the li tags the display: inline property? Should work, because I want everything inline, right? WRONG:

This happens with inline attr.

But why? Because you are saying that those tag/classes/ids are words!!! So they will have a word width, will have space between the tags, without you set spaces between them. You lost width and height properties and you won a lot of other properties automatically, with you want to center this list you can set text-align: center; on ul, but if you want to give height to li, you cant! So Inline is when you want a behavior similar to a text. So the list I’ve just show you is the same as “Primeiro Segundo Terceiro”.

Second: block

Block is the opposite of inline. If inline is for text, the block is for a block! You will not have the text properties, such as text-align! Block is the most common because it is the default for almost all the tag. If you want to set width, height, you have to use the block property. If you go to the first image of this post you will see this is a block by default.

Third: Inline-block

But if you want to give text properties in a block, how do you do this??? Them now we reach to the inline-block attribute. This attr mix text properties and block properties. So, what if I’ve changed the display:inline at li to inline-block?

“Ok Pedro, now I’m seeing, but what can I do with it?”.

Well, the first cool thing you can do is set the text-align at ul. Maybe text-align: right;?

!

Look, I’ve just set to a block with height/width a property of a text/word! So you can use center to!!!

Seems like magic but its only css :wink:

So, back to beginning: To this case, use inline-block you will be able to set width/height to your logo!

Now, bego, I guess you understood better how to use inline / inline-block attr. If you have any doubt or misunderstanding because of my English just post here :slight_smile:

5 Likes

Thanks for such in depth response. I just threw a solution without even thinking it.

1 Like