CODEWITHSUNDEEP
htmlcss
Arborem
Arborem

Reputation: 29

How to make buttons and links on my page appear on the same height without changing the hover effect?

The problem is whenever I change the padding of the buttons to fit the links height, I got a small white space in the hover effect for the links. You can see that in the fiddle below:

.navbar a {
    float: left;
    font-size: 16px;
    color: #b58b23;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown .drpbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: #b58b23;
    padding: 14px 16px;
    background-color: inherit;
}

https://jsfiddle.net/m8yb8645/

Upvotes: 0

Views: 29

Answers (2)

Krishna Devashish
Krishna Devashish

Reputation: 86

The problem is inside your link CSS. Actually when you are giving padding your padding equally affect 14px from top and bottom but due to that, only the bottom is not covered so I suggest you to add the following CSS code to your navbar anchor tag.

padding-bottom: 19px;

into .navbar a {...}

This might solve your problem but it is not a good habit Instead you use the bootstrap that is more helpful.

Upvotes: 0

VXp
VXp

Reputation: 12118

These two padding's don't match, but they should in order to solve your problem:

.navbar a {
  padding: 14px 16px;
}

.dropdown .drpbtn {
  padding: 17px 16px; /* needs to match with the above, so 14px 16px */
}

Updated fiddle

Upvotes: 1

Related Questions