0

me gustaría saber como poner un título H1 en mi Header ya que al intentarlo no me funciona bien y aparentemente se vuelve un poco loco el navegador. Justo entre el logo y el navbar de la derecha, mas o menos la idea es ponerlo en el medio de esas 2 cosas. introducir la descripción de la imagen aquí

*{
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', sans-serif;
}

html {
    background-color: darkslategrey;
}

.header {
    background: radial-gradient(ellipse at top right, dodgerblue 10%,#1a1825 90%);;
    height: 130px;
}

.header .nav img{
    margin-top: 7px;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    border-radius: 15px;
    border-style: solid;
    border-width: 4px;
    border-color: darkgreen;
}

.header .nav ul {
    float: right;
    display: flex;
    margin-right: 80px;
}

.header .nav ul li {
    margin-right: 20px;
    list-style: none;
}


.header .nav ul a{
    text-decoration: none;
    color:white;
}

.header .nav ul a:hover{
    font-size: 20px;
    color: dodgerblue;
}


.navbar {
    display: block;
    text-align: center;
    background: radial-gradient(ellipse at top right, green 10%,#1a1825 90%);;
    width: 100px;
    height: 100px;
    border-radius: 15px;
    margin-top: 10px;
    border-style: solid;
    border-width: 3px;
    border-color: darkgreen;
    
    
}


.header .nav ul li p {
    text-align: center;
}

.navbar .fas{
    color: white;
    background-color: darkolivegreen;
    border-radius: 10px;
    width: 50px;
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Exo+2:wght@600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6430c85e3e.js" crossorigin="anonymous"></script>
    <title>Scout Bird</title>
</head>
<body>
    <div class="header">
        <div class="nav">
            <img src="/images/logobuho.PNG">
                <ul>
                    <div class="navitem"><li><a href="#" class="navbar"><p><br><i class="fas fa-wallet"></i><br>Prices</p></a></li></div>
                    <li><a href="#" class="navbar"><p><br><i class="fas fa-users"></i><br>Boosters</p></a></li>
                    <li><a href="#" class="navbar"><p><br><i class="fas fa-envelope-square"></i><br>Contact</p></a></li>
                    <li><a href="#" class="navbar"><p><br><i class="fas fa-user-plus"></i><br>Members Area</p></a></li>
                </ul>
        </div>
    </div>

Gracias a quién me ayude.

2
  • Donde quieres poner el h1?
    – AugustoM
    Commented el 19 dic. 2021 a las 2:44
  • Si lo quieres poner entre el logo y tu menu de navegacion tienes que tener en cuenta que h1 (o cualquier otro heading) es un elemento de tipo bloque, entonces "empujaria" tus item de navegacion hacia abajo, asi se espera que funcione un elemento de bloque, y quedaria por debajo de tu logo
    – AugustoM
    Commented el 19 dic. 2021 a las 2:46

2 respuestas 2

0

Hice un cambio bastante notable en el código para arreglar varios errores que había y dejar un poco prolijo.

Para solucionar con tu pregunta agregando un título h1 vastaria trabajar con display: flex.

Esto funciona solamente en pantallas anchas como en la computadora. Pero dejé un @media para móviles como tarea a realizar

 

*,html,body {

 margin: 0;

 padding: 0;
 -webkit-box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}

:root {
 --height: 130px;
}

body {
 font-family: 'Exo 2', sans-serif;
  background-color: darkslategrey;
}

.header {
 display: flex;
 justify-content: center;
 align-items: center;
 width:100%;
 min-height: var(--height);
 background: radial-gradient(ellipse at top right, dodgerblue 10%, #1a1825 90%);
}

.perfil {
 display: block;
 margin: auto;
 margin-left: 0;
 width: 100px;
 height: 100px;
 border-radius: 15px;
 border: 4px solid darkgreen;
}

.titulo { 
 display: inline-block;
 width: 100%;
 margin: auto;
 text-align: center;
}

.nav {
 display: inline-block;
 width: 100%;
 height: var(--height);
 margin: auto;
 margin-right: 0;
}

.nav ul {
 display: flex;
 justify-content: center;
 align-items: center;
 list-style: none;
 width: 100%;
 height: 100%;
}

.nav ul li {
 display: block;
 width: 100px;
 height: 100px;
 margin: auto;
 text-align: center;
 background: radial-gradient(ellipse at top right, green 10%,#1a1825 90%);
 border-radius: 15px;
 border: 3px solid darkgreen;
}

.nav ul li a {
 text-decoration: none;
 color: white;
 font-size: normal;
 -webkit-transition: all 0.3s ease-in-out;
}

.nav ul li a:hover {
 font-size: 20px;
 color: dodgerblue;
}

.nav ul li span {
 display: flex; 
 flex-direction: column;
 justify-content: center;
 align-items:center;
 width:100%;
 height: 100%;
}

.nav ul li span:before {
 margin: 5px auto;
 width: 50px;
 padding: 5px 5px;
 color: white;
 background-color: darkolivegreen;
 border-radius: 10px;
}

*/ Estilos para móviles  */

@media (max-width: 767.98px) {
 
 
 
}
 

<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Exo+2:wght@600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6430c85e3e.js" crossorigin="anonymous"></script>
<title>Scout Bird</title>
</head>
<body>

<div class="header">
    <img class="perfil" src="/images/logobuho.PNG"> 
    
    <h1 class="titulo">Título h1</h1>
        
    <div class="nav">
        
        <ul>
            
            <li>
                <a href="#" class="navbar">
                    <span class="fas fa-wallet">Prices</span>
                </a>
            </li>
            
            <li>
                <a href="#" class="navbar">
                    <span class="fas fa-users">Boosters</span>
                </a>
            </li>
            
            <li>
                <a href="#" class="navbar">
                    <span class="fas fa-envelope-square">Contact</span>
                </a>
            </li>
            
            <li>
                <a href="#" class="navbar">
                    <span class="fas fa-user-plus">Members Area</span>
                </a>
            </li>
            
        </ul>
    
    </div>
    
</div>

</body>

</html>

Hay muchas cosas por mejorar, pero estamos para ayudar

0

No detallas mucho en tu solicitud, segun entiendo querrias poner un heading entre el logo y tus items del menu de navegacion.

Debes tener en cuenta que los headings son elementos de bloque, img es de tipo de linea, ul de tipo bloque tambien. Entonces una manera de ordenar elementos tipos bloque puede ser haciendo un float ahi, de modo que y pueden hacer float a la izquierda, y el de tu navegacion hacer un float a la derecha.

Igual puedes hacer uso de flex-box.

Ejemplo:

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  
}

header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}


header img,
header h1 {
  font-size: 22px;
  margin: 0;
}

header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
}

header ul li {
  display: inline-block;
}

ul.menu a {
  text-decoration: none;
  line-height: 22px;
  display: inline-block;
}
<header>
  <nav>
    <img class="logo" alt="logo" src="https://global-uploads.webflow.com/5e157547d6f791d34ea4e2bf/6087f2b060c7a92408bac811_logo.svg" />
    
    <h1>
    Titulo de pagina
    </h1>
    
    <ul class="menu">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
</header>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.