I have a problem inserting an image in my Sticky Header or Dynamic Header. Here it is seen in the following GIF:
When I'm at the top of everything on the web, the logo is fine, but when I go down, I scroll and the image is covered in the middle. But it only happens with the image, because when you go down, the letters adjust. How could I fix it? Thanks.
Codes:
$(document).ready(function(){
$(window).scroll(function(){
if( $(this).scrollTop() > 0 ){
$('header').addClass('header2');
} else {
$('header').removeClass('header2');
}
});
});
*{margin:0; padding:0;}
body {
background:#fffffa;
}
header {
width:100%; /* Establecemos que el header abarque el 100% del documento */
overflow:hidden; /* Eliminamos errores de float */
background:#252932;
margin-bottom:20px;
}
.wrapper {
width:90%; /* Establecemos que el ancho sera del 90% */
max-width:1000px; /* Aqui le decimos que el ancho máximo sera de 1000px */
margin:auto; /* Centramos los elementos */
overflow:hidden; /* Eliminamos errores de float */
}
header .logo {
font-size:50px;
line-height:200px;
float:left;
}
header nav {
float:right;
line-height:200px;
}
header nav a {
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
line-height:normal;
font-size:20px;
font-weight:bold;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
header nav a:hover {
background:#f56f3a;
border-radius:50px;
}
.header2 {
position: fixed;
height:100px;
}
.header2 .logo {
line-height:100px;
font-size:30px;
}
.header2 nav {
line-height:100px;
}
.contenido {
padding-top:100px;
}
.contenido p {
margin-bottom:1em;
}
@media screen and (max-width: 950px) {
header .logo,
header nav {
width:100%;
text-align:center; /*Centramos el menu y el logotipo*/
line-height:100px;
}
.header2 {
height:auto;
}
.header2 .logo,
.header2 nav {
line-height:50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="header.js"></script>
</head>
<body>
<header class="header2">
<div class="wrapper">
<div class="logo">
<img src="http://i.imgur.com/DKG7QCr.png" alt="">
</div>
<nav>
<a href="#">Inicio</a>
<a href="#">Foro</a>
<a href="#">Tienda</a>
<a href="#">Votar</a>
<a href="#">Soporte</a>
</nav>
</div>
</header>
<section class="contenido wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
</section>
</body>
</html>
You are using
font-size
to size your imagepng
, which doesn't work, you should useheight
orwidth
.Your code:
It could be something like this:
You could delete the box
.logo
if you want, and directly give the style to the image.header2 .wrapper img
CSS
HTML
I would start by editing the image to work well with it: remove all white space around the logo in the .gif itself: 66px right, 39px top, 40px right, and 50px bottom. So you can well control the size and margins of the logo from the code.
It is the image's own white space (in yellow) that is holding it down. There are ways to tweak it from code, but it's easier to just edit the image and have good raw material to work with.