I can’t align the logo with the menu

Asked

Viewed 45 times

0

in responsive mode it the menu icon aligns with the logo, but when it gets in full screen mode it gets below the logo

/*----RESET---*/
*{
	margin: 0;
	padding: 0;
	font-size: 100%;
	border: none;
	outline: none;
	font-weight: 300;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
}

body{
	background-color: #f5f5f5;
}

a{
	text-decoration: none;
}

ul{
	list-style: none;
}

img{
	max-width: 100%;
}

/*----CABEÇALHO----*/

.cabecalho{
	width: 100%;
	float: left;
	padding: 3% 4%;
}

.logo{
	width: 56px;
	height: 56px;
	font-size: 0px;
	background-image: url("../img/logo-mobile.png");
	background-position: center center;
	background-size: 56px;

}

.btn-menu{
	width: 56px;
	height: 56px;
	float: right;
	text-align: center;
	border-radius: 56px;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(to right, #ce2e3c, #da6709);
}

.menu{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.9);
    top:0;
    left: 0;
        
}

.btn-close{
    font-size: 1.5em; 
    color: #fff;
    float: right;
    cursor: pointer;
    margin:2% 3% 0 0 ;
}

.menu ul{
    width: 100%;
    float: left;
    text-align: center;
   
}

.menu li{
    padding: 1.5%;
    
}

.menu li a {
    font-size: 2em;
    color: #fff;
    padding: 1.5% 3%;
}

.menu li a:hover{
    border: 1px solid #da6709;
    background-color: #fff;
    color: #000;
}

/*banner*/
.banner{
    width: 100%;
    float: left;
    text-align: center;
    padding: 3% 4%;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}
.title{
    width:100%;
}

.title h2{
    font-size: 2.5em;
    color: #fff;
    font-weight: 700;
}

.title h3{
    font-size: 1.5em;
    color: #fff;
}

.buttons{
    width: 100%;
    margin-top: 4px;
}

.buttons i {
    float: right;
}
.btn-cadastrar{
    width: 100%;
    font-size: 1.5em;
    text-align: left;
    cursor: pointer;
    background-color: #fff;
    color: #130400;
    padding: 5px;
}

.btn-sobre{
    width: 100%;
    font-size: 1.5em;
    text-align: left;
    cursor: pointer;
    background-color: #130400;
    color: #fff;
    padding: 5px;
    margin-top: 2px;
}

/*serviços*/
.servicos{
    width: 100%;
    float: left;
    padding: 3% 4%;    
    
}

.servico{
    width: 100%;
    text-align: left;
    border-radius: 7px;    
    background-color: #fff;
    margin-bottom: 3%;
}

.servico img{
    border-radius: 7px 7px 0 0;
   
}

.inner{
    padding: 7%;
}

.inner a {
    font-size: 1.5em;
    color: #130400;
    font-weight: 700;
}

.inner h4{
    font=size: 1.2em;
    color: #130400;
    margin-top: 2%;
}

.inner p{
    margin-top: 6%;
    color: #130400;
    line-height: 1.5em
}

/*NEWSLETTER*/
.newsletter{
    width:100%;
    float: left;
    text-align: center;
    padding: 3% 4%;
    background-color: #130400;
}

.newsletter h2{
    font-size: 1.5em;
    color: #fff;
    font-weight: 700;
}

.newsletter h3{
    color: #fff;
}

.newsletter form{
    margin-top: 2%;
}

.newsletter input{
    width: 100%;
    background-color: #130400;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5%;
}

.newsletter button{
     width: 100%;
    background-color: #fff;
    color: #130400;
    padding: 5%;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 2%;
}

.rodape{
    width: 100%;
    float: left;
    padding: 3% 4%;
    text-align: center;
    background: linear-gradient(to right, #ce2e3c, #da6709);
}

.social-icons a{
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 3%;
}

.social-icons a:hover{
    color: #130400;
}


@media screen and (min-width: 480px){
    .logo{
	width: 214px;
	background-image: url("../img/logo.png");
	background-position: center center;
	background-size: 214px;
    }

}

@media screen and (min-width: 768px){
.servico{
    width: 49%;
    float: left;
    margin-right: 2%;
    }
.servico:nth-child(2){
    margin-right: 0;
    }
    
.newsletter h2{
    font-size: 2em;
   }

.newsletter h3{
    font-size: 1.5em;
    }

    
.newsletter input{
    width: 70%;
    padding: 2%;
    float: left;
    margin-right: 1%
    }

.newsletter button{
    width: 29%;
    padding: 2%;
    float: right;
    margin-top:0;
    
    }
}

@media screen and (min-width: 960px){
    .title{
        width: 70%;
        float: left;
        text-align: left;
    }
    
    .title h2{
        font-size: 2em;
    }
    
    .title h3{
        font-size: 1.5em;
    }
    
    .buttons{
        width: 30%;
        float: right;
        margin-top: 0;
    }
    
    .servico{
        width: 32%;
    }
    
    .servico:nth-child(2){
        margin-right: 2%;
    }
    
    .servico:nth-child(3){
    margin-right: 0;
    }
    
    .newsletter input{
    width: 60%;
    float: none;
   
    }

.newsletter button{
    width: 20%;
    float: none;
    float: none;
    }
}

@media screen and (min-width: 1280px){
    .btn-menu{display: none;}
    .btn-close{display: none;}
    .menu { width: auto; height: 56px; line-height: 56px; float: right; background-color: #f5f5f5; display: block; position: static; }
    .menu li{padding:0; float: left; }
    .menu li a{color: #130400; font-size: 1em; padding: 15px}
    .menu li a:hover{border: none; color: #da6709; }
}
<!DOCTYPE html>
<html lang="PT-BR">
<head>
	<meta chaset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>NODEPROP - Especializada em Soluções Digitais</title>
	<link rel="stylesheet" href="css/style.css">
	<meta name="description" content=" Agencia">
	<meta name="Keywords"  content="Ahencia, Marketing">
	<meta name="robots" content="index, follow">
	<meta name="author" content="Jadiê">	
	 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
	<link rel="icon" href="img/icon.png">
</head>
<body>
    
<!--botão do menu-->  
	<header class="cabecalho">
		<button class="btn-menu"><i class="fa fa-bars" aria-hidden="true"></i>
        </button>
 <!--logo-->  
		<a href="index.html" ><h1 class="logo"> </h1></a>
		
 <!--menu-->  
        <nav class="menu">
            <a  href="" class="btn-close"><i class="fa fa-times"></i></a>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Cliente</a></li>
                <li><a href="">Serviços</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Quem Somos</a></li>
                <li><a href="">Contato</a></li>
            </ul>
        </nav>
        
	</header>
    
<!--banner-->  
    <div class="banner">
        <div class="title">
            <h2>OUSE INOVAR</h2>
            <h3>Criamos esperiências e estabelecemos ações estratégias que conectam marcas e consumidores</h3>
        </div>
        
        <div class="buttons">
            <button class="btn-cadastrar">Cadastrar<i class="fa fa-arrow-circle-right"></i></button>
            <button class="btn-sobre">Sobre <i class="fa fa-question-circle"></i></button>

        </div>
        
    </div>
    
<!--Parte de conteudo (meio) do site-->  
    <main class="servicos">
        <article class="servico">
            <a href=""><img src="img/criacoes.jpg"></a>
            <div class="inner">
                <a href="">Campanhas Publicitárias</a>
                <h4>Impressos, VTs e Jingles</h4>
                <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
            </div>
        </article>
        
        <article class="servico">
            <a href=""><img src="img/md.jpg"></a>
            <div class="inner">
                <a href="">Marketing Digital</a>
                <h4>Administração de Redes Socias</h4>
                <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
            </div>
        </article>
        
        <article class="servico">
            <a href=""><img src="img/cs.jpg"></a>
            <div class="inner">
                <a href="">Criação de Sites</a>
                <h4>Sites Administráveis</h4>
                <p>É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
            </div>
        </article>
        
    </main>
    
<!--NEWsLETTER-->
    <section class="newsletter">
        <h2>Inscreva-se agora!</h2>
        <h3>Receba novidades, dicas e muito mais</h3>
        <form>
            <input type="email" name="email" placeholder="Seu email">
            <button>Cadastrar</button>
        </form>
    </section>
    
<!--rodape-->

<footer class="rodape">
    <div class="social-icons">
        <a href=""><i class="fa fa-facebook"></i></a>
        <a href=""><i class="fa fa-twitter"></i></a>
        <a href=""><i class="fa fa-google"></i></a>
        <a href=""><i class="fa fa-instagram"></i></a>
        <a href=""><i class="fa fa-envelope"></i></a>
               
        
    </div>
    
    
</footer>

    
    
    
    
<!--Jquery-->  
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    
<script>
    $(document).ready(function(){
        $(".btn-menu").click(function(){
                $(".menu").show();   
    });
        $(".btn-close").click(function(){
            $(".menu").hide();
        })
});
</script>
</body>
</html>

html css

1 answer

0

That’s because the h1 where is the soon is occupying the entire horizontal extension of the page, and with that pushing the menu down.

You will solve this by adding display: inline-block; in class .logo (just the one outside the @media Rules), causing the element to have the width bounded to its width:

.logo{
    width: 56px;
    height: 56px;
    font-size: 0px;
    background-image: url("https://trellis.co/wp-content/uploads/2015/09/hidden_meanings_facts_within_famous_logos_cover_image.jpg");
    background-position: center center;
    background-size: 56px;
   display: inline-block;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.