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.
(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)
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!
About the ::beforepseudo 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
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.)
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?
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:
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.
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.
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 .
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.