I want to get a series of highlighted options to appear in my menu, just as www.letrame.com does (for example) in its menu.
For now, in my CSS code I have this:
.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;
}
And in my HTML code I have this:
<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>
Unfortunately, the CONTACT button appears with a margin at the top that shouldn't be there and that bothers the eye.
Does anyone know how to fix it?
Thank you and greetings.
First of all, clarify a couple of concepts: margin is the space that separates the red element from the blue one, while padding is the one that separates the green element from the red one.
In your code, what makes the element
a
get taller is the following property:Eliminating it causes that, between the element
<div class="col-md-4 col-8 mb-3 mb-md-0"></div>
and<div class="col-md-8"></div>
there is a separation, the fault of the elementbutton
.Unless it has occurred to me that you have a style to
button
remove that space, the solution would be that.Tip : Use elements based on context. The simplest path is usually the most correct:
You just have to remove it
padding-top: 30px;
like this:It is not a margin that appears at the top, it is a padding of 30 pixels that you are indicating here:
the padding is the space between the edge of the box and the content practically from the edge inwards, on the contrary the margin is from the edge outwards. Just delete the