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.
padding-top: 30px;
o disminuye su tamaño. Está en la clase.nav-link.highlight-box