CSS menu align a tag's content vertically without line-height

[Tech]

Hello,

I am working on this menu and I am struggling to make the a tags centered vertically in the li tag without losing my animation. Does anybody know how to center it without line-height that would destroy my layout if I wanted to make it responsive.

CodePen: https://codepen.io/Tech_CA_Bro/pen/gZoYxX
(I want the a tag to be 100% of height so that the animation can take the whole space above and under the content of the a tags plus the padding on left and right that has been applied)

Thank you,
-Tech.

[tkhquang]

Hi, would this do it for you?

.nav-link {
    display: flex;
    align-items: center;
}

[Tech]

Hey,

I didn’t thinking about flexing the a tags, it works okay but not quite perfect.
I tried it here: https://codepen.io/Tech_CA_Bro/pen/WLdeXa

As you can see, there is a little bit of a problem at the top of the a tag when you hover (extra space) and the border overflows the bottom.

Thank you,
-Tech.

P.S: I tried an overflow: hidden and it is extremely glitchy XD.

[tkhquang]

Since you don’t set a specific height for the elements for box-sizing not affect them it seems, I can only think of this solution:

.nav-link {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

[Tech]

So since my height isn’t specific (so it isn’t in px), it leaves space above and overlaps at the bottom? I see but I don’t understand why it does. I tried your solution and it works but I’m not sure I understand how it works too. Could you explain more in detais so I understand please :]?

Also I was trying to reproduce this https://www.youtube.com/watch?v=8x1mO1d6-4w (without the dropdown part that’s for later :)) except I have a logo div and he doesn’t. The way he does it thought I believe it to be bad for the moment where I’ll try to make it responsive.

Also, if you try to squeeze my menu (it isn’t responsive yet that’s normal) it is so weird. So if you don’t mind explain what I asked earlier in the first three lines, I’ll try to make it responsive and reach out to you ASAP!

Thanks,
-Tech.

[tkhquang]

Okay so this seems to work for your needs:

.nav-link {
    position: relative;
    color: #000;
    text-decoration: none;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.nav-link:hover {
  background-color: rgba(0, 128, 0, .25)
}

.nav-link:hover::before {
  position: absolute;
  content: "";
  transition: .15s;
  height: 5px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(0, 128, 0);
}

About the hover space above I’m not sure, sorry

[Tech]

Hey,

First of all, THANKS A LOT .

Second of all, can you please explain the commented lines please XD?:

.nav-link {
    position: relative; //This line please 
    color: #000;
    text-decoration: none;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.nav-link:hover {
  background-color: rgba(0, 128, 0, .25)
}

.nav-link::before { //This line please 
  position: absolute; //This line please 
  content: ""; //This line please 
  transition: .15s;
  height: 5px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;  //This line please 
}

header li:hover .nav-link::before {  //This line please 
  background-color: rgb(0, 128, 0);
}

To finish, about the hover space, I don’t know why but it isn’t appearing anymore XD!

-Tech

P.S: You are really good at CSS, hats of to you man! It makes me happy to see that awesome CSS there.

[tkhquang]

About the ::before pseudo elements. In short, I use it to create a new element before the .nav-link. But first I had to I set the position: relative to the .nav-link, because I want to use position: absolute to the the new pseudo element I want to create. position: absolute searches for the nearest relative positioned element, in order to position itself, if we not set the position of nav link, and you don’t have any other element with relative position then it will take the body to position the absolute, you can try to see what I mean. I created a ::before pseudo element with 5px height and 100% width of the ordinary element (.nav-link) then set its color to transparent, only make its color visible when you hover the parent.
Well I made a few mistake, the last block should be like this

.nav-link:hover::before {
  background-color: rgb(0, 128, 0);
}

Sorry I’m not so good at explaining these things, English is not my first language. Hope this makes sense, lol.

Useful related stuff: https://stackoverflow.com/questions/10426497/position-relative-vs-absolute

[Tech]

I understand better now english is not my first language either don’t worry, you speak it well!

Thanks alot, I’ll make this responsive and reach out again to your (if you don’t mind)

You’re awesome!

[tkhquang]

No problem, glad I could help!

[Tech]

Hey tkhquang,

I did that menu that you helped me for again but this time, I did it alone . I made it responsive too this time, here is the codepen:

I’d like to precise that I didn’t use the before pseudo element to make the animation.
I’m not sure why you used it since it isn’t necessary, was it just a preference of yours ?
(I’ll think of using it in my incoming projects to pratice it.)

Here is the codepen: https://codepen.io/Tech_CA_Bro/pen/ropbgZ, I’d enjoy feedback regarding any aspect (especially responsiveness and code, design, color palette, etc if you want).

To finish, if you don’t mind, I have a few questions:

1 - How to fix, the text going underneath the fixed header? (would also happen if it was an image, also, the text is here for testing the transparency of my header bg-color)
2 - If we add position: absolute; and bottom: 0; to the footer, it is going to go at the bottom of whatever closest parent container that is relative which in this case is the body element right? But why does it behave like body is at height:100vh when it is not and this ONLY when it is on a mobile sized window?

Thanks again for everything!

[tkhquang]

Yeah it may be unnecessary, but I used it because it didn’t add unnecessary height to the contents when using flex display on the .nav-link. Also when now I looked at my codes I saw some unnecessary things as well, but yeah it’s no big deal, glad that you can use a simple solution right now.
Regarding your questions:

1. When using position:fixed to the element, it will be taken out of the normal flow of HTML, CSS. In other words, it has no relative relations to the rest of others, which leads to the problem that other elements see them as none-existence, hence the overlapped. Simple solution is that you can add some padding top or margin top either to the <body> or the below section of the header based on the height of the fixed header. Note that you may experience “offset anchor link targeting” problem later on, but this is another problem and not what we’re talking about right now.
2. In your code I don’t see any block which has position: relative? If not set, the default position of the element would be static, which is not what we’re looking for. In that case I think it will search all the parents up until it reachs the window element, which may be the reason why it behaved as if it had 100vh.

[Tech]

Hey,

Regarding the unneccesary height you talked about, I used box-sizing: border-box; doesn’t that take care of this stuff too? I think not actually, I’m not sure xD! Because on mobile it looks like my animation is overflowing, I’ll fix it .

For my first question, alright, I’ll fix it .
For my second question, that’s a fair assumption .

Again thanks a lot,
-Tech

[tkhquang]

I think normally box-sizing: border-box would do the job but since don’t set any height for the items it may not work correctly, at least on my browser (firefox). And the unnecessary height I talked about was the borders xD They adds up the whole height of the navbar when they were set, so I tried to avoid that, the pseudo element method doesn’t take up extra spaces.

[Tech]

So interesting the pseudo elements don’t take extra spaces. Thanks for the info man ! It is much appreciated.

Perfect then, I’m good to go and fix the fixes and advance on my landing page .

If you don’t mind, I’ll contact you eventually.

Thanks again man!
Hope to talk to you again, you are awesome.