0

es la primera vez que estoy haciendo una web y me encuentro con los siguientes problemas:

  1. El header en una pantalla de 32 pulgadas se queda con margen a los lados, no así en un ordenador portátil donde la pantalla es más pequeña, me gustaría saber cómo adaptarlo.
  2. Si un ítem ocupa más espacio del que tiene, se escribe en 3 líneas, ¿cómo puedo centrar el texto?
  3. El logo de la web aparece en la izquierda. Este logo aparece muy grande en la pantalla de 32'' en cambio cuando lo abro en el móvil es hiper mega pequeño. ¿cómo puedo adaptarlo en el móvil?
  4. El botón que abre otra web llamada portal clientes no se visualiza en el móvil

Este es el código:

    <nav class="navbar navbar-expand-lg fixed-top custom_nav_menu sticky">
        <div class="container">
            <!-- LOGO -->
            <a class="navbar-brand logo" href="">
                <img src="img/textosplash.png" alt="" class="img-fluid logo-light">
                <img src="img/textosplash.png" alt="" class="img-fluid logo-dark">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <i class='ti-menu'></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">¿Qué es la app?</a>
                    </li>
                    <li class="nav-item">
                        <a href="#feature" class="nav-link">¿Eres una empresa de reparto?</a>
                    </li>
                    <li class="nav-item">
                         <a href="#client" class="nav-link">Trabaja con nosotros</a>
                    <li class="nav-item">
                         <a href="#question" class="nav-link">Preguntas frecuentes</a>
                     <li class="nav-item">
                         <a href="#partners" class="nav-link">Partners</a>
                    </li>
                </ul>
                <div class="d-lg-flex d-none">
                    <ul class="nav align-self-center">
                        <li class="nav-item pl-4">
                            <a class="btn header-btn" href="https://panel.app.app">
                                Portal clientes
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- Header end -->```


Gracias!

1 respuesta 1

0

Para hacer que el header ocupe el ancho completo debes cambiar la clase container por container-fluid. Para centrar un texto puedes usar la clase text-center en el item o en div que los encierra a todos. Para el logo tienes que ensuciarte las manos con css, no te puedo decir mas nada. Para el boton Portal Clientes debes remover la clase d-none del div padre para que se vea.

1
  • Hola, las respuestas sin código son consideradas de baja calidad. Mira como responder, así te das una idea de las normas de la comunidad para dar respuestas de calidad y evitar que sean eliminadas.
    – DjCrazy
    Commented el 16 jul. 2020 a las 14:51

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.