Overflow: hidden;
Hey everyone, I found my question asked on stackoverflow. Basically, I am trying to put an
overflow: hidden on body but to do that I need to put overflow: hidden on the html element also. But when doing that, on page refresh 50/50 chance I get a black screen, anyone come across this issue before?4 Replies
The reason I am facing this issue is because I moved my mobile menu from left to right side of the header and therefore can't use
transformX(-100%) anymore
so to achieve the same thing on the right side of my screen, I am trying to do that by putting overflow hidden on the bodyif you need to do that (which I am not saying you do or not because we have little to go off here) you can just remove the nav from the flow of dom elements so this way it doesnt cause the body to overflow
@Coder_Carl !
long time, I decided to do it a little different
but I have a problem right now that I am stuck with if you could help me with that it, would be great
https://8f4d-185-13-179-135.ngrok.io/
if you happen to check this out
in mobile view
320 wide
when you click the menu it opens down with 2 lines of nav links
and if you increase the width to 442px
all the nav links are on one line
what I am trying to do is have the bottom border (the blue line) go up as the screen width increases
I've been able to use clamp for typography and space in awesome ways but this situation is a little different. Instead of increasing the font/space as viewport gets bigger, I want to decrease it as it gets bigger
hmm.. actually, I just tried
max-content for the width instead of a clamp and it seems to work
if I can animate it a bit that would be nice
something is odd about max-content it's like the transition doesn't work on block-size if I use max-content
block-size: clamp(1rem, 50%, 4rem); this works and transition doesn't act weird!Sorry got stuck into some unit tests.
Have to duck out but be back later