Mover logo menu css

João Vitor Corrêa Rubert · Maio 25, 2021

Olá boa noite, estou fazendo um site para uma pizzaria, estou criando o menu e quero colocar a logo ao lado do menu, mexendo no css já consegui algum resultado mas não o esperado, alguém consegue me ajudar ou me dar algum caminho a seguir? desde já agradeço a qualquer ajuda.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Pizza</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav id="menu-horizontal">
            <div class="logo">
                <img src="https://i.ibb.co/pbQv0CK/logo.png" />
            </div>
        <ul>
            <li>
                <a href="#">Inicio</a>
            </li>
            <li>
                <a href="#">Cardápio</a>
            </li>
            <li>
                <a href="#">Sobre</a>
            </li>
            <li>
                <a href="#">Contatos</a>
            </li>
        </ul>
    </nav>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
    margin: 0  auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
#menu-horizontal{
    background-color: #CC470D;
}
#menu-horizontal ul{
    list-style: none;
    padding: 0;
    max-width: 800px;
    background-color: #CC470D;
}
#menu-horizontal ul li{
    display: inline; 
}
#menu-horizontal ul li a{ 
    color: white;
    padding: 50px;
    display: inline-block;
    text-decoration: none;
    transition:background .4s;
    
}
#menu-horizontal ul li a:hover{ 
   
    background-color: #571a00;
}
.logo,.menu-horizontal{
    display:inline-block;
    font-size:0;
    vertical-align:middle;
}
.logo{
    text-align:left;
    width:60%;
    height: 30%;
}
.logo img{
    max-width:100%;
    }

rcsbnu27 · Maio 26, 2021

Olá João eu sou novo e também estou começando. Então não sei se seria a melhor solução mais coloquei a imagem dentro <ul><li>, como você pode ver a abaixo no código. espero que tenha ajudado.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Pizza</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav id="menu-horizontal">

        <ul>
            <li class="logo">
                <img src="https://i.ibb.co/pbQv0CK/logo.png" width="150" height="150" />
            </li>
        
            <li>
                <a href="#">Inicio</a>
            </li>
            <li>
                <a href="#">Cardápio</a>
            </li>
            <li>
                <a href="#">Sobre</a>
            </li>
            <li>
                <a href="#">Contatos</a>
            </li>
        </ul>
    </nav>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
    margin: 0  auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
#menu-horizontal{
    background-color: #CC470D;
    height: 20%;
}
#menu-horizontal ul{
    list-style: none;
    padding: 0;
    max-width: 800px;
    background-color: #CC470D;
    height: 20%;
}
#menu-horizontal ul li{
    display: inline; 
}
#menu-horizontal ul li a{ 
    width: 150px;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 50px;
    display: inline-block;
    text-decoration: none;
    transition:background .4s;
    
}
#menu-horizontal ul li a:hover{ 
   
    background-color: #571a00;

}

.logo,.menu-horizontal{
    display:inline-block;
    font-size:0;
    vertical-align:middle;
}
.logo{
    text-align:left;
    width:10%;
    height: 10%;
}
.logo img{
    max-width:100%;
}

Espero ter ajudado.

Entrar

Mover logo menu css

Pergunta

João Vitor Corrêa Rubert

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

rcsbnu27

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades