Why is the logo not shown in the nav? (HTML/CSS)

[Hip]

Hey guys,

I want to put a icon.png on the navigation as a logo but somehow it is below the nav and not shown.

Can anyone tell me how to solve this?

 

https://codepen.io/andy4117/pen/KKpXEwJ

 

Thank you in advance!

[rikitikitavi]

Not sure what you mean -> picture is located on the grey nav bar. You might have an issue with the size of the image itself, so it might seem like it is below.

Otherwise if you want to play with the position of pic you can add:

#logo
...
position: relative; 
top: 100px; 
left: 100px;
...

 

[AbsoluteFool]

background-image: url("rocket.png"); You forgot quotes!

[Hip]

On 3/6/2020 at 1:11 AM, rikitikitavi said:

Not sure what you mean -> picture is located on the grey nav bar. You might have an issue with the size of the image itself, so it might seem like it is below.

Otherwise if you want to play with the position of pic you can add:

#logo
...
position: relative; 
top: 100px; 
left: 100px;
...

 

Somehow this does not work. 

So the picuture itself is way bigger than the size I want to make it. This is the current result:

 

 

 

You see on the top left I kinda have a shadow where the picture should be and nothing else.

 

@AbsoluteFool I've added it now but it still does not work

[C2dan88]

30 minutes ago, Hip said:

You see on the top left I kinda have a shadow where the picture should be and nothing else.

It showing like that because your #logo div is really small. (2.5em x 2.5em). Increase the size of the div to same size as your background image, or rather than apply the logo as a background image. Set the logo as an <img> in your HTML and do not set with/height in your CSS. 

 

Tip: Use your browsers built in developer tools element inspector for checking dimensions of elements on your webpage.

 

[Hip]

15 minutes ago, C2dan88 said:

It showing like that because your #logo div is really small. (2.5em x 2.5em). Increase the size of the div to same size as your background image, or rather than apply the logo as a background image. Set the logo as an <img> in your HTML and do not set with/height in your CSS. 

 

Tip: Use your browsers built in developer tools element inspector for checking dimensions of elements on your webpage.

 

So you mean like this? 

 

  <div id="logo">
                    <img src="rocket.png">
                </div>

 

#logo
{
    width: 2.5em;
    height: 2.5em;
    margin: 1em;
    
    position: absolute;
   
}

This is kinda too large

[C2dan88]

Then you'll have to resize the image if you want it to fit inside the grey header area.

[Hip]

1 hour ago, C2dan88 said:

Then you'll have to resize the image if you want it to fit inside the grey header area.

I have done it and it works! Thank you!

 

 

Here is the code:

 

#logo
{
    width: 2.5em;
    height: 2.5em;
    margin: 1em;
    
    position: absolute;
   
}

#logo img 
{
    width: 2.5em;
    height: 2.5em;
}

 

I see that I can even delete the logo with the <img> way and just have #logo img {...} 

 

 

Can you tell me how to solve this without the <img> and as backgorund-image instead, I'm curious ? Thanks in advance!

Solved

 

I have found a way to do this with background-image

 

  <div id="logo">
               
                </div>

#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
}