1

quiero conseguir que en mi menú, aparezcan una serie de opciones destacadas tal y como hace (por ejemplo) www.letrame.com en su menú.

Por ahora, en mi código CSS tengo esto:

.nav-link.highlight-box {
  text-align: center;
  color: #ffffff;
  background: #f46669;
  margin: 0 0 25px;
  overflow: hidden;
  border-radius: 35px 0px 35px 0px;
  -moz-border-radius: 35px 0px 35px 0px;
  -webkit-border-radius: 10px 10px 10px 10px;
  padding-top: 30px;
  border: 2px solid #f46669;
}

.nav-link.highlight-box:hover {
  background: #ffffff;
  text-decoration: none;
  color: #f46669;
}

Y en mi código HTML tengo esto:

<header class="header py-5">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-4 col-8 mb-3 mb-md-0">
                <a href="index.html">
                    <img src="img/logo.svg" alt="" class="img-fluid">
                </a>
            </div>
            <div class="col-md-8">
                <nav class="navbar navbar-expand-md navbar-light justify-content-center">

                    <button class="navbar-toggler mb-3" data-toggle="collapse" data-target="#nav_principal">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div id="nav_principal" class="collapse navbar-collapse justify-content-lg-end text-center">
                            <a href="contacto.html" class="nav-link">NOSOTROS</a>
                            <a href="blog.html" class="nav-link">BLOG</a>
                            <a href="clases.html" class="nav-link">CLASES</a>
                            <a href="galeria.html" class="nav-link">GALERÍA</a>
                            <a href="contacto.html" class="nav-link highlight-box">CONTACTO</a>
                    </div> <!-- nav_principal -->
                </nav>
            </div> <!-- col-md- 8-->
        </div> <!-- row -->
    </div>
</header>

Lamentablemente, me aparece el botón de CONTACTO con un margen en la parte superior que no debería estar ahí y que molesta a la vista.

¿Alguien sabe cómo arreglarlo?

Gracias y un saludo.

2
  • 2
    Elimina en tu CSS padding-top: 30px; o disminuye su tamaño. Está en la clase .nav-link.highlight-box Commented el 14 may. 2019 a las 16:30
  • El problema, es que si lo quito el botón aparece descentrado en comparación con el resto de palabras: i.imgur.com/qmHLGYR.png
    – Toni521
    Commented el 16 may. 2019 a las 14:45

3 respuestas 3

2

Antes de nada, aclarar un par de conceptos: margin es el espacio que separa el elemento rojo del azul, mientras que padding es el que separa el elemento verde del rojo.

Diferencias entre padding y margin

En tu código, lo que hace que el elemento a se vuelva más alto es la siguiente propiedad:

.nav-link.highlight-box {
  padding-top: 30px
}

Eliminarla hace que, entre el elemento <div class="col-md-4 col-8 mb-3 mb-md-0"></div> y <div class="col-md-8"></div> exista una separación, culpa del elemento button.

A no ser que se me haya pasado pensar que tengas un estilo para button que elimine ese espacio, la solución sería esa.

Consejo: utiliza los elementos en base al contexto. El camino más sencillo suele ser el más correcto:

header {
  background-color: #ff3b30;
  display: flex;
  flex-flow: row wrap
}

.logo {
  background-color: #4cd964;
  height: 5em;
  width: 100%
}

nav {
  background-color: #5856d6;
  display: flex;
  flex-flow: row nowrap
}

nav a {
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  color: #000;
  margin-right: 1em;
  padding: .25em .5em;
  text-decoration: none;
  text-transform: uppercase
}

nav a:hover {
  color: #007aff
}

nav a:last-child {
  margin-right: 0
}

.highlighted {
  background-color: #ff9500;
  color: #fff
}

.highlighted:hover {
  background-color: #fff;
  border-color: #ff9500;
  color: #ff9500
}
<header>
  <div class="logo"></div>
  <nav>
    <a href="#">Nosotros</a>
    <a href="#">Blog</a>
    <a href="#">Clases</a>
    <a href="#">Galería</a>
    <a class="highlighted" href="#">Contacto</a>
  </nav>
</header>

1
  • 1
    Tu aclaración de conceptos "margin" y "padding" no es muy precisa. Te invito a que edites tu respuesta y agregues más información si así lo deseas.
    – EMCode
    Commented el 15 may. 2019 a las 13:25
1

Solo tienes que eliminar el padding-top: 30px; asi:

.nav-link.highlight-box {
  text-align: center;
  color: #ffffff;
  background: #f46669;
  margin: 0 0 25px;
  overflow: hidden;
  border-radius: 35px 0px 35px 0px;
  -moz-border-radius: 35px 0px 35px 0px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 2px solid #f46669;
}

.nav-link.highlight-box:hover {
  background: #ffffff;
  text-decoration: none;
  color: #f46669;
}
<header class="header py-5">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-4 col-8 mb-3 mb-md-0">
                <a href="index.html">
                    <img src="img/logo.svg" alt="" class="img-fluid">
                </a>
            </div>
            <div class="col-md-8">
                <nav class="navbar navbar-expand-md navbar-light justify-content-center">

                    <button class="navbar-toggler mb-3" data-toggle="collapse" data-target="#nav_principal">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div id="nav_principal" class="collapse navbar-collapse justify-content-lg-end text-center">
                            <a href="contacto.html" class="nav-link">NOSOTROS</a>
                            <a href="blog.html" class="nav-link">BLOG</a>
                            <a href="clases.html" class="nav-link">CLASES</a>
                            <a href="galeria.html" class="nav-link">GALERÍA</a>
                            <a href="contacto.html" class="nav-link highlight-box">CONTACTO</a>
                    </div> <!-- nav_principal -->
                </nav>
            </div> <!-- col-md- 8-->
        </div> <!-- row -->
    </div>
</header>

2
  • 5
    Posible duplicado xD Commented el 14 may. 2019 a las 16:34
  • Pero el problema, es que si lo quito el botón aparece descentrado en comparación con el resto de palabras: i.imgur.com/qmHLGYR.png
    – Toni521
    Commented el 16 may. 2019 a las 14:48
1

No es un margin lo que te aparece en la parte superior, es un padding de 30 pixeles que tu le estas indicando aquí:

<pre> 
    .nav-link.highlight-box {
    text-align: center;
    color: #ffffff;
    background: #f46669;
    margin: 0 0 25px;
    overflow: hidden;
    border-radius: 35px 0px 35px 0px;
    -moz-border-radius: 35px 0px 35px 0px;
    -webkit-border-radius: 10px 10px 10px 10px;
    padding-top: 30px; //Esto hace que haya un espacio de 30 pixeles
    border: 2px solid #f46669;
}
</pre>

el padding es el espacio entre el borde de la caja y el contenido prácticamente es del borde hacia adentro, por el contrario el margin es del borde hacia afuera. Solo borra el

<code> 
   padding-top: 30px;
</code>
3
  • si lo quito el botón aparece descentrado en comparación con el resto de palabras: i.imgur.com/qmHLGYR.png
    – Toni521
    Commented el 16 may. 2019 a las 14:44
  • Se debe a los estilos de las clases .nav-link.highlight-box, especificamente en margin: 0 0 25px; para que estén alineados prueba con esto margin: 0 0 25 0px; o margin: 0px; esto se debe al orden en como funciona la asiganción de valor en la propiedad margin investigalo mas a fondo.
    – luis_am92
    Commented el 16 may. 2019 a las 15:55
  • Mira los resultado haciendo la modificación en margin como te sugerí imgur.com/CeNzeGA
    – luis_am92
    Commented el 16 may. 2019 a las 16:09

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.